React——forwardRef 转发组件引用

forwardRef

forwardRef 是 React 提供的一个 API，它用于在函数组件中转发 ref。

在 React 中，ref 被用来获取对组件内部 DOM 节点或者组件实例的直接引用。默认情况下，你不能在函数组件上使用 ref 属性，因为它们没有实例。但是，有时候你可能需要在父组件中访问子组件中的 DOM 元素或者类组件实例，这就是 forwardRef 发挥作用的地方。

当你使用 forwardRef 创建一个组件时，它将接收 props 和 ref 作为参数，并能够将这个 ref 传递给子组件。

这里是 forwardRef 的基本用法：

const MyComponent = React.forwardRef((props, ref) => {
  // 将 ref 绑定到某个 DOM 元素或组件上
  return <div ref={ref}>...</div>;
});

// 在父组件中
const parentRef = useRef();
<MyComponent ref={parentRef} />;

在上面的代码示例中，MyComponent 是一个使用 forwardRef 创建的函数组件。它能够接收一个 ref 并将其绑定到内部的 div 元素上。父组件可以通过创建一个 ref（parentRef）并通过 ref 属性传递给 MyComponent，之后就能通过 parentRef.current 访问到那个 div 元素的实际 DOM 节点。

使用 forwardRef 的原因通常包括：

• 控制子组件的 DOM 元素：比如你想从父组件中控制子组件的焦点、选择文本或媒体播放。
• 调用子组件的方法：如果子组件是一个类组件，你可能需要调用它的一些公共方法。
• 与第三方库集成：有些库需要直接操作 DOM 元素，forwardRef 可以帮助你将元素的引用传递给它们。

请注意，在大多数情况下，推荐使用数据流（props 和 state）和高阶组件（HOCs）或者 hooks 来解决问题，而不是过度依赖 ref 和 forwardRef。这样可以保持组件之间的松耦合，并使得状态管理更可预测。