报错:

​ warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of BaseFormItem.

问题状况:

在这里插入图片描述

原因分析:

​在Antd Form 组件中使用自定义 Function component时提示以上警告错误。父组件想拿到子组件的 ref,使用 antd 的 Form.create() 包装子组件之后,可以通过包装后的组件的 wrappedComponentRef 拿到子组件的实例。但是因为子组件是一个 function component 没有实例,导致不能在子组件上使用 wrappedComponentRef 属性(本质上使用了 ref 属性获得子组件的实例 _class,且 antd 对本来的 ref 属性另外包装了一下,返回的不是子组件的实例 _class)。
​即:refs无法获取,这是antd form双向绑定对ref有需要。因为ref和key一样,不是通过prop来传递的,react对其有特殊的处理。

解决方案:

​ 在子组件上包裹一层forwardRef,forwardRef需从react中导出
在这里插入图片描述
在这里插入图片描述
​ 官方案例:Refs转发

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐