reactjs - 如何键入作为 prop 传递给 React 组件的异步函数

Question

我应该如何键入要作为属性传递给我的 React 组件的异步函数？

我的组件定义如下。具体来说，我不知道如何在我的界面中键入 addTask 属性:

interface INewTaskEntryProps {
    addTask:any; // this 
}
class NewTaskEntry extends React.Component<INewTaskEntryProps> {
    ...
    render() { 
        return (
            ...
            <button onClick={(e) => this.props.addTask(e)}>Do Something</button>
            ...
        );
    }
}

我的异步函数是这样定义的:

const addTask = async (e) => {
    ...
    try {
        const newID = await mongoTaskCollection.insertOne({
            ...
        });
    }
    ...
}

最后我像这样将异步函数传递到我的组件中:

<NewTaskEntry addTask={addTask} />

Answer 1

取决于 addTask 返回的内容，但可以是这样的:

interface INewTaskEntryProps {
  addTask: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; 
}

在这种情况下，您告诉 addTask 返回 void。