如何将子组件Ref映射为父组件中的Ref数组以追踪元素位置

我明白你现在的困扰——你想让每个子组件对应一个独立的Ref对象，组成一个数组，这样就能直接通过数组索引访问每个Ref并调用getBoundingClientRect()，但现在得到的是一个包裹着数组的Ref对象。咱们来一步步修正这个问题。

问题根源分析 #

你当前用useRef([])创建了一个单一的Ref对象，它的current属性是一个数组，你把每个子组件的DOM实例直接存在这个数组里。但你真正需要的是：数组里的每个元素都是独立的Ref对象（也就是每个元素都带有自己的current属性），而不是把所有实例塞进一个Ref的数组属性里。

修正方案与代码实现 #

我们需要先构建一个存储多个独立Ref的数组，再把每个子组件的ref绑定到数组中对应的独立Ref上。以下是修改后的完整代码：

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

export default function ParentComponent({ children }) {
  // 初始化Ref，其current属性是由独立useRef组成的数组，与子组件数量一一对应
  const itemsRef = useRef(
    React.Children.map(children, () => useRef(null))
  );

  // 示例：组件挂载后，打印每个子元素的位置信息
  useEffect(() => {
    itemsRef.current.forEach((ref, index) => {
      if (ref.current) {
        console.log(`子元素${index}的位置:`, ref.current.getBoundingClientRect());
      }
    });
  }, []);

  console.log(itemsRef.current); // 现在输出格式：[{current: HTMLDivElement}, {current: HTMLDivElement}, ...]

  return (
    <>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          // 直接将对应索引的独立Ref绑定给子组件
          ref: itemsRef.current[index]
        })
      )}
    </>
  );
}

关键细节解释 #

1. 创建独立Ref数组：
   用React.Children.map遍历传入的子组件，为每个子组件生成一个独立的useRef(null)，并将这些Ref对象组成的数组存入itemsRef.current。这样itemsRef.current就是你想要的Ref数组，每个元素都是带有自己current属性的Ref对象。

2. 绑定子组件Ref：
   在克隆子组件时，直接把itemsRef.current[index]赋值给子组件的ref属性，React会自动将对应的DOM元素或组件实例存入该Ref的current属性中。

3. 动态子组件的适配：
   如果子组件数量会动态变化（比如新增/删除子元素），需要监听children的变化，实时更新Ref数组的长度，避免索引不匹配：

   useEffect(() => {
     itemsRef.current = React.Children.map(children, () => useRef(null));
   }, [children]);
   

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