如何使用 React Hooks 传递函数？答案

【问题标题】：How to pass function with React Hooks?如何使用 React Hooks 传递函数？
【发布时间】：2019-05-08 14:08:09
【问题描述】：

如何使用 React Hooks 传递函数？我用过useCallback，但它显示它不是一个函数的错误。

在类组件中我是这样做的：

hidePopUp = (event) => {
    event.preventDefault();
    this.setState({
        popup: !this.state.popup
    })
}

然后我在传递函数：

<Popup hidePopUp={this.hidePopUp}/>

这是我对 Hooks 的问题：

const hidePopup = useCallback(
    (event) => {
        event.preventDefault();
        setPopup(!popup);
    }, []
);

<Popup hidePopup={() => hidePopup}/>

这是我在 Popup 组件中的按钮：

<button onClick={(event)=>this.props.hidePopUp(event)}></button>

【问题讨论】：

在您的第一个示例中，您将 hidePopUp 属性设置为采用单个参数的函数。在您的第二个示例中，您将hidePopUp 属性设置为一个 不带参数并返回一个函数 的函数。你试过<Popup hidePopup={hidePopup} />吗？
你在函数名上写错了。道具名称 - hidePopup，函数名称 - hidePopUp。 'Up' - 从大写开始
两个愚蠢的错误，无论如何谢谢你们，它有效。

标签： javascript reactjs

【解决方案1】：

首先是所有拼写错误和传递对同一函数的引用时的一些常见错误。否则，传递这个函数的记忆版本根本不应该是一个问题。

工作演示 here.

第二，这里没有看到useCallback的实际用法。

您应该使用依赖项来更新您的函数以表示popup 变量的正确值。方法如下：

const togglePopUp = useCallback(
    event => {
      event.preventDefault();
      setPopup(!popup);
    },
    [popup]
  );

第三，当你将函数作为prop传递时，你可以直接传递引用

<Popup hidePopup={togglePopUp}/>

注意 - 我已将您的 hidePopUp 重命名为 togglePopUp

【讨论】：

能否通过传入的函数改变子组件中popup的值？ ***在 childComponent togglePopUp(true)

【解决方案2】：

其实你可以不使用useCallback()而使用传递函数。我今天有类似的问题。然后我意识到我需要在您声明分配函数的变量之前添加const。简单地说，你应该在你创建的hidePopUp()之前添加const，因为你在那里使用了箭头函数。

你的函数的更新版本应该是：

const hidePopUp = (event) => {
    event.preventDefault();
    this.setState({
        popup: !this.state.popup
    })
}

额外说明：我并不是说其他人建议使用useCallback 是错误的。我要强调的是，你遇到的问题不是回调。

【讨论】：