传递的onClick函数未识别为函数

Question

我将 onClick 函数作为我的 React 应用程序中的道具从一个组件传递到另一个组件。它给出了一个错误，显示为

Uncaught TypeError: handleOnClick is not a function

。这是我正在通过的函数，

propList = ['a', 'b', 'c']

const handleOnClick = (propArr: any) => {
    console.log('propArr===>', propArr)
}

<ChildComponent handleOnClick ={handleOnClick } propList={propList}/>

这是采用这些道具的组件，

export const ChildComponent = (propList: any, handleOnClick : any) => {

const handleSubmit = () => {
    handleOnClick ('pass this to parent!')
}
   return(
       <button onClick={handleSubmit}>Submit</button>
   )
}

我需要做一些特别的改变来克服这种情况吗？

Answer 1

这是错误的：

export const ChildComponent = (propList: any, handleOnClick : any) => {
    // ...
};

组件将 props 作为单个参数，即一个对象。所以至少应该是：

export const ChildComponent = ({ propList, handleOnClick } : any) => {
    // ...
};

使用参数列表中的解构从第一个参数的值中选取

propList

和

handleOnClick

属性。

但是，如果您只想使用

any

类型，那么使用 TypeScript 就没有意义。最好为组件正确定义一个类型化的 props 接口，并使用它。例如：

type ChildComponentProps = {
    propList: AppropriateTypeHere[];
    handleOnClick(propArr: AnotherAppropriateTypeHere[]): void;
}
export const ChildComponent = ({ propList, handleOnClick } : ChildComponentProps) => {
    // ...
};