reactjs - React TypeScript将函数传递给子组件

Question

我试图将一个函数传递给一个子组件，但我得到了一些 typescript 错误...

父.tsx

import React from 'react';
import {Child} from './child';

const Parent: React.FC = () => {
    function fire() {
        console.log('fire')
    }

    return (
        <Child fire={fire}/>
//         ^___ error here!
    )
}

fire 的错误是 Type '{ fire: () => void; }' 不可分配给类型 'IntrinsicAttributes & { children?: ReactNode; }'。
类型'IntrinsicAttributes & { children?: ReactNode; 上不存在属性'fire' }'.ts(2322)

child.tsx

import React from 'react';
const Child: React.FC = (props: any) => {
    return (
        <p onClick={props.fire}>Click Me</p>
    )
}
export {Child};

Answer 1

您将类型添加到错误的位置。如果您将鼠标悬停在 React.FC 上，您会看到它接受一个参数并且默认值为 {}，这意味着没有默认情况下不可用的 Prop (像 props.children)。添加该参数。

将参数中的类型指定为 (props: any) 不会提供该类型信息。在 React.FC

中定义该参数时，可以省略它

import React from 'react';
interface ChildProps {
   fire: () => void
}
const Child: React.FC<ChildProps> = (props) => {
    return (
        <p onClick={props.fire}>Click Me</p>
    )
}
export {Child};