React.forwardRef 使用实例

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。

使用场景

• antd + Form.Item
• @tinymce/tinymce-react

问题

用 Form.Item 封装了 Editor，但使用表单获取数据的时候 content 表单，拿到的不是我们需要的富文本，而是一个对象。

import { Editor } from '@tinymce/tinymce-react';

const ProTinymceEditorFormItem = (props) => {
  return (
    <Form.Item {...props.formProps} name="content">
      <Editor {...props} />
    </Form.Item>
  );
};

我们可以封装一层使用 forwardRef 来传递ref 到 Editor 组件内部，这个样 Form.Item 就能正确的获取 content 中富文本

const ProTinymceEditorFormItem = (props) => {
  return (
    <Form.Item {...props.formProps}>
      <WrapEditor onChange={props.onChange} />
    </Form.Item>
  );
};

// 使用 forwardRef
const WrapEditor = forwardRef((props: any, ref) => {
  return (
    <Editor
      ref={ref as React.MutableRefObject<any>}
      value={props.value}
      onEditorChange={(c) => {
        props.onChange(c);
      }}
      init={{...}}
    />
  );
});

注意：据 antd Form 组件自定义表单控件 说明：

也就是 value 与 onChange 事件同名即可。

就能通过表单 api 如：setFieldsValue， getFieldsValue 方法设置、获取表单中的数据。