【React】【Antd】警告报错：Warning: Function components cannot be given refs. Attempts to access this ref wil

技术栈

React / Ant Design Pro / Ant Design

警告报错

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

原因

自定义组件嵌套在Antd Form中 , 没有使用React.forwardRef包裹

		<Form>
          <FormItem label="图文详情" {...formItemLayout}>
            {getFieldDecorator('resourceHtml', {
              initialValue: formDataList.resourceHtml || '',
              rules: [
                {
                  required: true,
                  message: '必选项',
                },
              ],
            })(<TextEditor onChangeText={onChangeText} />)}
          </FormItem>
         <Form />

以上详细原因截图来源 原博 : https://blog.csdn.net/weixin_44216157/article/details/124027743

解决

在自定义子组件上包裹一层React.forwardRef

export default Form.create()(React.forwardRef(TextEditor))