如何在 React 中正确使用 useRef 来访问子组件的 DOM 节点或实例？

如何在 React 中正确使用 useRef 来访问子组件的 DOM 节点或实例？

回答与解析：

在 React 中，useRef 通常用于访问 DOM 元素或保存可变值。但如果需要访问子组件的 DOM 节点或实例，必须使用 forwardRef。

原因：
函数组件默认不接收 ref 属性，即使你把 ref 传给子组件，它也不会自动绑定到子组件的 DOM 元素上。React 会忽略该 ref，除非子组件显式地使用 forwardRef 将 ref 转发给内部的 DOM 元素。

正确做法：

1. 子组件使用 React.forwardRef 包裹，并接收 (props, ref) 参数；
2. 在子组件内部将 ref 绑定到目标 DOM 元素；
3. 父组件通过 useRef 创建 ref，并将其传递给子组件。

示例代码：

// 子组件
const InputComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// 父组件
function Parent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current?.focus(); // 聚焦输入框
  };

  return (
    <>
      <InputComponent ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

注意事项：

• forwardRef 仅适用于函数组件；类组件可直接通过 ref 获取实例（但不推荐直接操作实例）；
• 若子组件是高阶组件（HOC）或使用了 hooks 封装，可能需要额外处理 ref 转发；
• ref 无法在 render 阶段使用（如在函数组件顶层直接访问 current），应在 useEffect 或事件处理函数中使用。

这种方式确保了父组件能够安全、明确地访问子组件中的 DOM 节点，同时保持组件的封装性。