Question

我正在尝试将功能传递给子组件，但是却收到许多打字稿错误...

parent.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; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'fire' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.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上，您会看到它接受一个参数，并且默认值为{}，这意味着没有默认情况下不可用的道具（例如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};

React TypeScript将函数传递给子组件

1 个答案: