reactjs - TypeScript > 函数组件无法指定引用。尝试访问此引用将失败。您的意思是使用 React.forwardRef() 吗？

Question

我尝试在 React、Typescript 和 ant ui 上创建功能组件。但是当我创建子组件时，我收到警告 - “无法给函数组件提供引用。尝试访问此引用将失败。您的意思是使用 React.forwardRef() 吗？”。请告诉我哪里出错了？

创建CounterpartyComponent:

const CreateCounterpartyComponent: React.FC<FormComponentProps> = props => {
  const GET_ALL = gql`
    query {
      types {
        value: id
        name: full_name
      }
    }
  `;
  const { getFieldDecorator } = props.form;
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(e);
  };
  const changeHandler = (e:number) => {
    console.log(e)
  }
  const { loading, data } = useQuery(GET_ALL);
  if (loading) return <Loader />;
  return (
    <div>
      <Form onSubmit={handleSubmit}>
        <Form.Item hasFeedback>
          {getFieldDecorator('address', {
            rules: [{ required: true, message: 'Address?' }],
          })(<CustomSeletor items={data.types} width="20%" changeEvent={(e)=>changeHandler(e)}/>)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Send
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export const CreateCounterparty = Form.create()(CreateCounterpartyComponent);

自定义选择器:

const { Option } = Select;

interface IProps {
  items: ISelectorProps[];
  width: string;
  changeEvent(e:number):void;
}

export const CustomSeletor: React.FC<IProps> = ({ items, width, changeEvent }) => {
  const mystyles = {
    width: width,
  };
  const handleChange = (e:number) => {
      changeEvent(e)
  }
  const options = items.map(({ value, name }) => <Option key={value} value={value}>{name}</Option>);
  return (
    <Select style={mystyles} onChange={handleChange}>
      {options}
    </Select>
  );
};

Answer 1

您正在使用 antd。正如 this page 上指定的:

自定义或第三方表单控件也可以在表单中使用。控件必须遵循以下约定:

• 它有一个受控属性值或其他名称，等于 valuePropName 的值。
• 它有事件 onChange 或名称等于触发器值的事件。
  • 支持引用:
  • 只能使用[email protected]之前的类组件.
  • 可以使用forwardRef在[email protected]之后添加ref支持.

antd 要求 CustomSelector 能够接收引用。函数组件必须包装在 React.forwardRef 中才能接收引用，否则您将收到所看到的错误。

解决方案是将CustomSelector包装在forwardRef中:

export const CustomSelector = React.forwardRef(({ items, width, changeEvent }, ref) => {
  const mystyles = {
    width: width,
  };
  const handleChange = (e:number) => {
      changeEvent(e)
  }
  const options = items.map(({ value, name }) => <Option key={value} value={value}>{name}</Option>);
  return (
    <Select ref={ref} style={mystyles} onChange={handleChange}>
      {options}
    </Select>
  );
});

您应确保Select符合antd的要求。检查他们的文档，因为我不认识他们。