reactjs - 在reactjs中从父组件调用子组件方法

Question

我需要从父组件调用子组件方法在reactjs中。我尝试过使用 refs 但无法做到。任何人都可以建议任何解决方案。谢谢。

Answer 1

如果使用 React Hooks，您可以使用 useRef 和 useImperativeHandle 钩子(Hook)。

在子组件中，添加钩子(Hook)中的函数。

const Child = forwardRef((props, ref) => {

  const printSomething = () =>{
     console.log('printing from child function')
  }
  useImperativeHandle(ref, () => ({
    printSomething: printSomething
  }));

  return <h1>Child Component</h1>;
});

使用引用从父级调用公开的函数。

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.printSomething()}>Click</button>
    </div>
  );
};