React forwardRef 与 ref 转发

学习如何使用 forwardRef 将 ref 自动传递给子组件中的 DOM 元素或组件实例。 · 难度：入门 · +15XP

为什么需要 forwardRef？

默认情况下，函数组件不会接收 ref 属性。如果父组件想要直接访问子组件中的某个 DOM 元素（例如输入框），就需要使用 forwardRef 来转发 ref。

1. 基本语法

const MyInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});
// 父组件使用
function Parent() {
  const inputRef = useRef();
  const focusInput = () => inputRef.current.focus();
  return (
    <>
      <MyInput ref={inputRef} placeholder='输入内容' />
      <button onClick={focusInput}>聚焦</button>
    </>
  );
}

2. 高阶组件中的转发

如果使用了 HOC，也需要通过 forwardRef 确保 ref 能够传递到包裹的组件。

3. 使用场景

• 控制焦点、文本选择或媒体播放
• 集成第三方 DOM 库
• 触发强制动画

练习提示

在下方代码中，点击父组件的按钮会通过 ref 使子组件的输入框获得焦点。尝试修改子组件，让它包含多个输入框并转发 ref 到第二个输入框。