1、转发refs到DOM组件
ref 转发是一个可选特性,其允许某些组件接收 ref,并将其向下传递给子组件。这种特性适用于类似FancyButton 或 MyTextInput 这样的高可复用“叶”组件,这些组件倾向于在整个应用中以一种类似常规 DOM button 和 input 的方式被使用,利用ref转发特性可以方便的访问其 DOM 节点,用来实现管理焦点,选中或动画等。
这样,使用 MyButton 的组件可以获取底层 DOM 节点 button 的 ref ,并在必要时访问,就像其直接使用 DOM button 一样。
注意:第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数,且 props 中也不存在 ref。
2、转发refs到class组件
ref 转发不仅限于 DOM 组件,也可以转发 refs 到 class 组件实例中
如上图,在App组件中通过this.ref.current获取到了底层 DOM 节点 button
3、在高阶组件中转发 refs
这个特性对高阶组件很适用。因为ref不是prop属性,不会被透传下去,如果对高阶组件添加 ref,该 ref 将引用最外层的容器组件,而不是被包裹的组件。利用转发refs这个特性,我们就可以使用 React.forwardRef API 明确地将 refs 转发到内部被包裹的组件。示例如下:
高阶组件(参数为组件,返回值为新组件的函数):
被包裹的组件:
可以看到在HocRefs组件中使用Test,通过this.ref.current可以获取到Test组件中的handleClick方法