React中获取循环生成的tr元素运行时坐标设置绝对定位元素

核心问题分析 #

你之前用useRef失败，大概率是因为直接用单个useRef存储循环渲染的<tr>，最终只会保留最后一个元素的引用。循环渲染的元素需要用ref数组来分别存储每个<tr>的DOM节点。

实现步骤 #

1. 创建ref数组存储每个行节点
2. 用状态保存每行的左侧坐标
3. 在组件挂载/数据更新时计算坐标
4. 将坐标绑定到目标<div>的样式中

完整代码示例 #

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

function TableWithPositionedDivs({ data }) {
  // 存储每个<tr>的DOM引用
  const rowRefs = useRef([]);
  // 存储每行的左侧坐标，键为索引，值为坐标值
  const [rowLeftPositions, setRowLeftPositions] = useState({});

  // 当data变化时，重新计算所有行的坐标
  useEffect(() => {
    const positions = {};
    rowRefs.current.forEach((row, index) => {
      if (row) {
        // 获取行相对于视口的左侧坐标
        const rect = row.getBoundingClientRect();
        positions[index] = rect.left;
      }
    });
    setRowLeftPositions(positions);
  }, [data]);

  return (
    <table>
      <tbody>
        {data.map((value, index) => (
          <tr 
            key={index}
            // 将当前行的DOM节点存入ref数组
            ref={el => rowRefs.current[index] = el}
            // 如果需要<div>相对于<tr>定位，需给<tr>设置相对定位
            // style={{ position: 'relative' }}
          >
            <td>
              <div 
                style={{
                  position: 'absolute',
                  // 使用对应行的左侧坐标
                  left: `${rowLeftPositions[index] || 0}px`,
                  // 可选：添加其他样式方便查看效果
                  width: '100px',
                  height: '20px',
                  backgroundColor: 'rgba(255,0,0,0.3)'
                }}
              />
              {/* 其他单元格内容 */}
              {value}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

注意事项 #

• 如果希望<div>相对于<tr>内部定位（而不是视口），需要给<tr>添加position: relative，此时<div>的left可以直接设为0，无需获取坐标，这可能是更简单的实现方式。
• getBoundingClientRect()返回的是元素相对于视口的坐标，如果页面有滚动，可能需要结合window.scrollX来修正为相对于文档的坐标：rect.left + window.scrollX。
• 确保data数组的key使用唯一标识（而非仅用索引），避免React渲染时出现节点复用问题。

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