const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
```以下是对上述示例发生情况的逐步解释:
我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
我们通过指定 ref 为 JSX 属性,将其向下传递给 <FancyButton ref={ref}>。
React 传递 ref 给 forwardRef 内函数 (props, ref) => ...,作为其第二个参数。
我们向下转发该 ref 参数到 <button ref={ref}>,将其指定为 JSX 属性。
当 ref 挂载完成,ref.current 将指向 <button> DOM 节点。
注意
第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数,且 props 中也不存在 ref。
Ref 转发不仅限于 DOM 组件,你也可以转发 refs 到 class 组件实例中。
refs
最新推荐文章于 2023-11-22 23:30:09 发布