Как передать функцию от родительского компонента к дочернему компоненту с возможностью проверки типа

#reactjs #typescript #typeerror #react-component

Вопрос:

Я новичок в машинописи и хочу передать свою функцию onDogSelected компоненту «Дети <Dogs /> «.

Когда я попытался, я получил такое сообщение об ошибке:

 Type '{ onDogSelected: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes amp; { children?: ReactNode; }'.Property 'onDogSelected' does not exist on type 'IntrinsicAttributes amp; { children?: ReactNode; }'.

Я не знаю, что это значит. Я пытался понять это, но до сих пор не нашел решения.

 const HomePage: React.FC = () => {
    const [dogSelected, setDogSelected] = useState("");
    const onDogSelected = (e: any) => {
        setDogSelected(e.target.value)
    }
    return (
        <ApolloProvider client={client2}>
          <Dogs onDogSelected={onDogSelected} />
          {dogSelected amp;amp; <span>{dogSelected}</span>}
        </ApolloProvider>
    );
};

export default HomePage;

Ответ №1:

React.FC является устаревшим, вы должны использовать React.FunctionComponent .

React.FunctionComponent является универсальным типом. Вам следует передать в него реквизиты вашего компонента, если вы ожидаете большего.

Таким Dogs образом, компонент должен выглядеть следующим образом,

 import { FunctionComponent } from "react";

const Dogs: FunctionComponent<DogsProps> = (props) => {
  ...
};

interface DogsProps {
  onDogSelected(e: any): void;
}

Вам не нужно создавать интерфейс или тип, вы можете просто передать его в качестве аргумента

 const Dogs: FunctionComponent<{ onDogSelected(e: any): void; }> = (props) => {