时间戳

首页 > 解决方案 > React 传递函数作为 prop

javascript - React 传递函数作为 prop

问题描述

我正在使用打字稿/反应，我从基于类的组件 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<HTMLButtonElement, MouseEvent>) => void) | 不明确的

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

标签： javascriptreactjstypescript

解决方案

尝试更新您的界面

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

推荐阅读