React TypeScript - 传递回调函数

Question

以下代码可以在 JavaScript 中正常运行。我正在使用 React+TypeScript，因此这是一个 JSX 文件：

调用组件：

<FiltersPanel onFiltersChanged={() => { console.log('I was called') }} />

内部组件：

const FiltersPanel = (onFiltersChanged) => {

    const handleFiltersChange = () => {
        onFiltersChanged(); /* I am getting `TypeError: onFiltersChanged is not a function` */
    };

    return (<div onClick={handleFiltersChange}/> );
};

export default FiltersPanel;

为什么 TypeScript 抱怨找不到函数，而函数肯定是作为 prop 传递的。

Answer 1

您将函数作为 props 传递，因此您应该像这样将它作为 props 接收到您的组件

const FiltersPanel = (props) => {  }

然后像这样使用它

props.onFiltersChanged()

或者你可以像这样使用解构

const FiltersPanel = ({onFiltersChanged}) => { }

所以你可以像这样在没有 props 对象的情况下使用它

onFiltersChanged()

React TypeScript - 传递回调函数

React TypeScript - passing a callback function

function

typescript

reactjs

react-props