javascript - 如何使用 React Hooks 传递函数？

Question

如何使用 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>

Answer 1

首先是所有拼写错误以及传递对同一函数的引用时的一些常见错误。否则，传递该函数的内存版本根本不应该成为问题。

工作演示 here .

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

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

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

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

<Popup hidePopup={togglePopUp}/>

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