如何循环对象数组实现CSS Grid三列数据展示？

需求：循环对象数组，将每个值以网格形式展示。
当前问题：只能获取itemList中每个对象的第一个值，展示效果如下：

name	description	details
1	2	3

相关代码：

itemList = [
  {
    id: 1,
    name: "item1",
    description: "description1",
    details: "detail1"
  },
  {
    id: 2,
    name: "item2",
    description: "description1",
    details: "detail2"
  },
  {
    id: 3,
    name: "item3",
    description: "description1",
    details: "detail3"
  }
];

function Items() {
  const handleRender = () => {
    return itemList.map((item) => {
      for (let entry in item) {
        return (
          <div className="grid-item" key={item.id}>
            {item[entry]}
          </div>
        );
      }
    });
  };

  return (
    <div className="grid-container">
      <div className="grid-item">name</div>
      <div className="grid-item">description</div>
      <div className="grid-item">details</div>

      {handleRender()}
    </div>
  );
}

尝试过多种循环方式，但要么所有itemList条目都被放入一个grid-item，要么仅显示每个对象的第一个值。

期望效果：实现如下三列布局：

name	description	details
item1	description1	details1
item2	description2	details1
item3	description3	details1

请问如何实现该效果？是否可以使用CSS Grid来实现？

当然可以用CSS Grid实现，先揪出你代码里的核心问题：

为什么只显示每个对象的第一个值？ #

你在map里嵌套的for...in循环，第一次迭代就用return直接跳出了循环，所以每个对象只会返回第一个属性对应的元素。而且for...in会遍历对象所有可枚举属性（包括你不需要的id），这也不符合需求。

用CSS Grid实现的完整代码 #

const itemList = [
  {
    id: 1,
    name: "item1",
    description: "description1",
    details: "detail1"
  },
  {
    id: 2,
    name: "item2",
    description: "description2",
    details: "detail2"
  },
  {
    id: 3,
    name: "item3",
    description: "description3",
    details: "detail3"
  }
];

function Items() {
  // 指定要展示的列字段及顺序，避免遍历到不需要的id
  const columns = ['name', 'description', 'details'];

  return (
    <div className="grid-container">
      {/* 渲染表头 */}
      {columns.map(col => (
        <div className="grid-item header" key={col}>
          {col}
        </div>
      ))}
      {/* 渲染每行数据 */}
      {itemList.map(item => (
        <React.Fragment key={item.id}>
          {columns.map(col => (
            <div className="grid-item" key={`${item.id}-${col}`}>
              {item[col]}
            </div>
          ))}
        </React.Fragment>
      ))}
    </div>
  );
}

对应的CSS Grid样式：

.grid-container {
  display: grid;
  /* 设置3列等宽，可根据需求调整宽度 */
  grid-template-columns: repeat(3, 1fr);
  /* 网格项之间的间距 */
  gap: 8px;
  padding: 16px;
}

.grid-item {
  padding: 12px;
  border: 1px solid #eee;
  text-align: center;
}

.grid-item.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

代码说明 #

1. 用columns数组明确指定要展示的字段和顺序，既避免了遍历无关属性，又能保证表头和数据列的顺序一致。
2. 用React.Fragment包裹每行的三个网格项，不会生成额外DOM元素，同时给每行设置唯一的key保证React渲染性能。
3. CSS Grid通过grid-template-columns: repeat(3, 1fr)实现3列等宽布局，gap控制网格间距，轻松还原表格样式的布局效果。

这样就能实现你需要的三列网格布局，每个对象的三个字段都会正确对应到表头列中。

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