如何从 React 功能组件调用父函数？

Question

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

我可以用 class 个组件做到这一点，如下所示：

<MyChild func={this.functionname} />

但是我无法访问 this.functionName 我的子组件，它是一个 功能性 组件。

如何在子功能组件*以及它的所有功能（例如 useCallback 和 useEffect）中访问它

Answer 1

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

Answer 2

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

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>
  );
}

如何从 React 功能组件调用父函数？

How can I call a Parent function from a React functional component?

components

prop

reactjs