React中如何动态调整独立行的同列宽度保持一致

嘿，这个需求我刚好踩过类似的坑，咱们一步步拆解最优方案！

首先得明确：纯CSS确实搞不定这个场景。因为你的结构是分散的.row区块，不是原生<table>那种关联式结构，CSS的table-layout: auto这类自动适配逻辑根本没法作用在独立的div上，所以必须借助JavaScript来计算和同步列宽。

下面针对React场景，结合大规模数据的性能考量，给你一套最优实现思路：

核心思路 #

1. 计算每一列所有单元格（包括表头）的最大内容宽度
2. 将这个最大宽度同步应用到对应列的所有单元格上
3. 针对大规模数据做性能优化，避免频繁计算或DOM操作

具体实现方案（含性能优化） #

方案一：隐藏测量容器法（首选，适合大规模数据）

这种方式不用遍历所有DOM元素，而是通过创建隐藏的“测量元素”来计算文本宽度，性能更优：

import { useEffect, useState } from 'react';

const DynamicList = ({ columns, data }) => {
  const [columnWidths, setColumnWidths] = useState([]);

  const calculateColumnWidths = () => {
    const columnCount = columns.length;
    const newWidths = [];

    // 为每一列创建隐藏的测量容器
    for (let colIdx = 0; colIdx < columnCount; colIdx++) {
      const measurer = document.createElement('div');
      // 复制单元格的样式，保证测量宽度准确
      measurer.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
        padding: 8px;
        border: 1px solid #eee;
        font-size: inherit;
        font-family: inherit;
      `;
      document.body.appendChild(measurer);

      let maxWidth = 0;
      // 测量表头宽度
      measurer.textContent = columns[colIdx];
      maxWidth = measurer.getBoundingClientRect().width;
      // 测量每一行该列的宽度，取最大值
      data.forEach(row => {
        measurer.textContent = row[colIdx];
        const currentWidth = measurer.getBoundingClientRect().width;
        if (currentWidth > maxWidth) maxWidth = currentWidth;
      });

      // 加一点缓冲避免文字溢出
      newWidths.push(`${maxWidth + 8}px`);
      document.body.removeChild(measurer);
    }

    setColumnWidths(newWidths);
  };

  useEffect(() => {
    calculateColumnWidths();
    // 监听窗口resize，重新计算列宽
    const resizeHandler = () => {
      // 节流处理，避免频繁计算
      requestAnimationFrame(calculateColumnWidths);
    };
    window.addEventListener('resize', resizeHandler);
    return () => window.removeEventListener('resize', resizeHandler);
  }, [columns, data]);

  return (
    <div className="dynamicList">
      <div className="header">
        {columns.map((col, idx) => (
          <div
            className="item"
            key={idx}
            style={{ width: columnWidths[idx] }}
          >
            {col}
          </div>
        ))}
      </div>
      {data.map((row, rowIdx) => (
        <div className="row" key={rowIdx}>
          {columns.map((_, colIdx) => (
            <div
              className="item"
              key={colIdx}
              style={{ width: columnWidths[colIdx] }}
            >
              {row[colIdx]}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default DynamicList;

配套基础CSS：

.dynamicList {
  display: flex;
  flex-direction: column;
}

.header, .row {
  display: flex;
}

.item {
  white-space: nowrap; /* 保证文本不换行，测量宽度才准确 */
  padding: 8px;
  border: 1px solid #eee;
  box-sizing: border-box;
}

方案二：DOM遍历法（适合小规模数据）

如果数据量不大，可以直接遍历所有单元格DOM来计算宽度，代码更直观：

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

const DynamicList = ({ columns, data }) => {
  const [columnWidths, setColumnWidths] = useState([]);
  const listRef = useRef(null);

  const calculateColumnWidths = () => {
    if (!listRef.current) return;
    const columnCount = columns.length;
    const widths = new Array(columnCount).fill(0);

    // 遍历所有单元格
    const allItems = listRef.current.querySelectorAll('.item');
    allItems.forEach((item, index) => {
      const colIdx = index % columnCount;
      const itemWidth = item.getBoundingClientRect().width;
      if (itemWidth > widths[colIdx]) {
        widths[colIdx] = itemWidth;
      }
    });

    setColumnWidths(widths.map(w => `${w + 8}px`));
  };

  useEffect(() => {
    calculateColumnWidths();
    const resizeHandler = () => requestAnimationFrame(calculateColumnWidths);
    window.addEventListener('resize', resizeHandler);
    return () => window.removeEventListener('resize', resizeHandler);
  }, [columns, data]);

  return (
    <div className="dynamicList" ref={listRef}>
      {/* 表头和行的渲染逻辑和方案一一致 */}
    </div>
  );
};

大规模数据的额外优化建议 #

如果你的表格数据量特别大（比如上万行），可以再加上这几个优化点：

1. 结合虚拟滚动：用react-window这类库只渲染可见区域的行，计算列宽时只需要考虑可见行+表头，大幅减少计算量
2. 缓存列宽：如果数据没有变化，不要重复计算列宽，用useMemo缓存计算结果
3. 分批计算：如果必须计算所有行的宽度，可以用setTimeout分批处理，避免阻塞主线程

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