报错:

​ 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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐