使用React hook时父组件如何调用子组件中的方法

在一个项目中,经常会遇到在父组件中调动子组件中方法的情况。那么,当使用React hooks的时候,如何在父组件调用子组件方法呢?

React hook提供一个useImperativeHandle,它可以在使用 ref 时自定义暴露给父组件的实例值,它一般和forwardRef一起使用。

官方文档说明:https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle

举个例子

export const Example = forwardRef(function Example(props, ref) {
  useImperativeHandle(ref, () => ({
    foo() {
      console.log("foo");
    },
    bar() {
      console.log("bar");
    }
  }));
  return <div>hello world</div>;
});

在父组件就可以直接使用了

const TodoList = () => {
  const exampleRef = useRef();

  useEffect(() => {
    exampleRef.current.foo()
    exampleRef.current.bar()
  }, [])

  return (
    <>
      <Example ref={exampleRef} />
    </>
  );
};

虽然能达到最终的目的,React官方也不是很建议这种做法,所以,酌情使用吧。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注