React Refs在高阶组件（HOC）动态生成组件时失效问题排查

问题原因拆解 #

你的代码存在三个核心问题导致 dynamicRef.current 始终为 null：

1. 函数组件默认不支持 ref：DynamicComponent 是函数组件，React 默认不会将 ref 附加到函数组件实例上，必须通过 React.forwardRef 显式转发 ref 才能生效。
2. 单个 ref 重复赋值的逻辑错误：即使组件支持 ref，将同一个 ref 赋值给多个组件，最终只有最后一个组件会覆盖 ref 的 current 值，但因为第一个问题的存在，ref 根本没有被正确绑定。
3. useEffect 依赖项设置错误：dynamicRef.current 不是有效的 useEffect 依赖项，React 不会跟踪 ref.current 的变化来触发 effect，导致你的 effect 无法在 ref 更新时执行。

修正后的代码实现 #

步骤1：用 forwardRef 改造子组件，使其支持 ref #

import React, { useRef, useEffect, forwardRef } from 'react';

// 使用 forwardRef 包裹函数组件，接收 ref 参数并绑定到根 DOM 元素
const DynamicComponent = forwardRef(({ name }, ref) => {
  return <div ref={ref}>{name}</div>;
});

步骤2：根据需求选择合适的 ref 管理方案 #

方案A：获取所有动态生成组件的 ref

如果需要访问所有子组件的 ref，可以用数组存储：

const HOC = ({ dynamicComponentProps }) => {
  // 用 ref 存储一个数组，存放每个子组件的 ref
  const dynamicRefs = useRef([]);

  useEffect(() => {
    console.log('所有组件 ref:', dynamicRefs.current);
    console.log('最后一个组件 ref:', dynamicRefs.current[dynamicRefs.current.length - 1]);
  }, [dynamicComponentProps]); // 依赖组件列表 props，确保组件更新后能获取最新 ref

  const renderDynamicComponent = () => {
    return dynamicComponentProps.map((props, index) => (
      <DynamicComponent 
        ref={(el) => dynamicRefs.current[index] = el} // 用回调 ref 给数组赋值
        key={index} 
        {...props} 
      />
    ));
  };

  return <div>{renderDynamicComponent()}</div>;
};

方案B：仅获取最后一个组件的 ref

如果只需要访问最后一个子组件的 ref，可以直接在渲染时判断赋值：

const HOC = ({ dynamicComponentProps }) => {
  const lastDynamicRef = useRef(null);

  useEffect(() => {
    console.log('最后一个组件 ref:', lastDynamicRef.current);
  }, [dynamicComponentProps]);

  const renderDynamicComponent = () => {
    return dynamicComponentProps.map((props, index) => {
      const isLast = index === dynamicComponentProps.length - 1;
      return (
        <DynamicComponent 
          ref={isLast ? lastDynamicRef : null} // 仅给最后一个组件绑定 ref
          key={index} 
          {...props} 
        />
      );
    });
  };

  return <div>{renderDynamicComponent()}</div>;
};

核心知识点说明 #

• forwardRef 的作用：函数组件本身没有实例，forwardRef 允许将父组件的 ref 转发到子组件内部的 DOM 元素或类组件实例上，实现跨层级的 ref 访问。
• 回调 ref 的优势：相比直接赋值 ref，回调 ref 能更灵活地控制 ref 的赋值时机，在动态生成组件时可以准确为每个组件分配对应的 ref。
• useEffect 依赖的正确设置：不要将 ref.current 作为 useEffect 的依赖项，React 不会跟踪它的变化。应该依赖触发组件重新渲染的 props（如 dynamicComponentProps），或使用空依赖项（仅在组件挂载后执行一次）。

内容的提问来源于stack exchange，提问作者user23327911