TypeScript> Компонентам функций нельзя дать ссылки. Попытки получить доступ к этой ссылке потерпят неудачу. Вы хотели использовать React.forwardRef ()?

Question

Я пытаюсь создать функциональный компонент на React, Typescript и Ant UI. Но когда я создаю дочерний компонент, у меня появляется предупреждение: «Функциональные компоненты не могут получить ссылки. Попытки получить доступ к этой ссылке потерпят неудачу. Вы имели в виду использовать React.forwardRef ()?». Скажите, пожалуйста, где я допустил ошибки?

CreateCounterpartyComponent:

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);

CustomSeletor:

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. Как указано на этой странице :

В форме также можно использовать настраиваемые или сторонние элементы управления формой. Элементы управления должны следовать следующим соглашениям:

• Имеет значение управляемого свойства или другое имя, равное значению valuePropName.
• Имеет событие onChange или событие, имя которого равно на значение триггера.
  • Ссылка поддержки:
  • Можно использовать только компонент класса до React@16.3.0.
  • Можно использовать forwardRef для добавления поддержки ссылки после React@16.3.0.

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. Проверьте их документы, потому что я их не знаю.