如何从 React 函数组件中调用父组件的函数？

Question

我希望我的React函数组件能够调用其父组件中的函数。

我可以像这样在类组件中实现此功能：

<MyChild func={this.functionname} />

但我在我的子组件中遇到了一个问题，无法访问this.functionName，该子组件是一个函数式组件。

我应该如何在子函数式组件中访问它，以及它的所有函数（例如useCallback和useEffect）中都能访问它？

- AlwaysQuestioning

---

你不能只是通过一个prop将函数传递到子组件中，然后在那里调用它吗？ - Dominik

Answer 1

我不确定我是否正确理解了这个问题，但您可以轻松地从父组件内调用子组件的函数，如下所示：

export function Child({ func }) {
  useEffect(() => {
    console.log('Calling func');
    func();
  }, [func]);

  return <div>I am the child component</div>;
}

export function Parent() {
  const childFunc = () => console.log('call me!');

  return (
    <main>
      <h1>Hello world</h1>

      <Child func={childFunc} />
    </main>
  );
}

- Dominik

---

谢谢。具体来说，我正在尝试从子函数中两次更新父函数中的状态变量。一次在子函数开头，一次在结尾。但是状态只改变了一次。有什么想法吗？ - AlwaysQuestioning

你在同一个函数中运行了一个状态函数两次，并期望状态在函数执行过程中发生变化？React 无法将您的函数分割并仅运行其中一半，因此函数将完整运行。因此，如果您在同一个函数内进行状态更改，则必须自己跟踪这些更改，这应该是很简单的。 - Dominik

Answer 2

使用this.props.func在您的子组件中调用该方法。

- Bafsky

---

如果子组件是一个函数式组件，则不需要。 - Dominik

是的，我错过了那部分。 - Bafsky