React 传递函数作为 prop答案

【问题标题】：React passing function as propReact 传递函数作为 prop
【发布时间】：2021-05-11 10:20:16
【问题描述】：

我正在使用 typescript/react，并且我从基于类的组件 A 中获得了此功能：

    listUpdateFunction() {
        console.log("called update functions")
        this.setState({ shouldUpdate: true });
    }

我将其作为道具传递给另一个组件 B。并将其用作提交按钮。

<button type="submit" onClick={this.props.listUpdateFunction}>Submit!</button>

我的 B 类道具接口是：

interface IProps {
    listUpdateFunction: Function;
}

我打算使用此函数在 A 类中调用 componentDidUpdate。但是我的代码无法编译为它所说的 B 类

(JSX 属性) React.DOMAttributes.onClick?: ((event: React.MouseEvent) => void) |未定义

我不明白，阅读此错误消息我认为该函数可能未定义，但我认为该接口会保证它不为空？

【问题讨论】：

【解决方案1】：

尝试更新你的界面

interface IProps {
    listUpdateFunction: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

【讨论】：