时间戳

首页 > 解决方案 > 如何从 React 功能组件调用 Parent 函数？

reactjs - 如何从 React 功能组件调用 Parent 函数？

问题描述

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

我可以用这样的类组件来做到这一点：

<MyChild func={this.functionname} />

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

我怎样才能在子功能组件中访问它，*以及它的所有功能（例如useCallback和useEffect）

标签： reactjscomponentsprop

解决方案

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

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

推荐阅读