reactjs - 如何将函数从父组件传递给类型为 assingable 的子组件

Question

我是 TypeScript 的新手，我想传递我的函数 onDogSelected到子组件 <Dogs /> .

当我尝试时，我收到了这样的错误消息:

Type '{ onDogSelected: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.Property 'onDogSelected' does not exist on type 'IntrinsicAttributes & { 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 && <span>{dogSelected}</span>}
        </ApolloProvider>
    );
};

export default HomePage;

Answer 1

React.FC 已弃用，您应该使用 React.FunctionComponent。

React.FunctionComponent 是一个通用类型。如果您不再期待，您应该将组件的 props 传递给它。

所以 Dogs 组件应该是这样的，

import { FunctionComponent } from "react";

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

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

您不必创建接口(interface)或类型，只需将其作为参数传递即可

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