javascript - 更新Ant Design后如何修复有关React.forwardRef()的警告？

将Ant更新到版本3.16.6后，控制台将显示以下警告：


  功能组件不能提供参考。尝试访问此参考
  将失败。您是要使用React.forwardRef（）吗？


仅当我的子组件包装在form.getFieldDecorator()中时，此选项才会显示。没有getFieldDecorator()的案例可以成功工作。
PS：我的子组件不是功能组件，而是有状态的。

过去，我有3.11.0版，并且运行良好。

该代码是一个简单的案例，并不多：

HOC

[...]
render() {
    return (
        <>
            <Form.Item>
                {form.getFieldDecorator('descricaoUnidadeTrabalho', {rules})(
                    <MyChild
                        props={props}
                        onChange={id => form.setFieldsValue({ id })}
                    />
                )}
            </Form.Item>
        </>
    )
}

export default connect(mapStateToProps, mapDispatchToProps)(
    Form.create()(MyComponent)
);

子组件

[...]
render() {
    return (
        <Select props>
            <Select.Option key={id} value={id}>
                {value}
            </Select.Option>
        </Select>
    );
}
export default MyChild;

我的情况可能出什么问题，请您告诉我吗？

最佳答案

getFieldDecorator将ref转发到其子组件。

在您的情况下，它尝试将ref转发到MyChild，但是您没有在组件中实现它。

这就是为什么您需要使用forwardRef的可能解决方案：

const MyChild = React.forwardRef(({ onChange, ...props }, ref) => (
  <Select {...props} ref={ref}>
    <Select.Option key={id} value={id}>
      {value}
    </Select.Option>
  </Select>
));

export default MyChild;

请注意，将属性称为props是非常容易混淆且容易出错的。