React中父组件如何调用子组件的方法?useImperativeHandle就够了

语言: CN / TW / HK

在React中要实现父组件对子组件的方法调用,离不开对React.forwardRef与useImperativeHandle的理解。 如果想直达使用方法,直接看第二点就可以了。如果想要理解透彻,请从开头看起。

1、React.forwardRef: 实现ref属性转发

React.forwardRef会创建一个React组件,能将其自身的 ref 属性转发给其后代组件。

这种技术并不常见,但在以下两种场景中特别有用:

  • 转发 refs 到 DOM 组件
  • 在高阶组件中转发 refs

React.forwardRef 接受一个渲染函数(可理解为一个组件)作为参数。这个函数的参数是props和ref,返回 React 节点。

```c const FancyButton = React.forwardRef((props, ref) => ( ));

// 以下这个 ref 直接指向 ```

本文主要参考React中文网,根据自己的理解加以总结。

如有帮助到您,请三连支持一下,欢迎留言。 如有不同意见,可在评论区指出,谢谢~