React实现3×3图片表格：每行满3张换行的代码逻辑求助

嘿，我来帮你搞定这个自动换行成3列的问题！你现在的代码之所以会生成9行，是因为每个Pictures组件都返回了一个单独的<tr>（表格行），每行只有一个<td>（单元格）。要改成3×3的布局，我们需要先把图片数据按每3个一组拆分，然后每组对应一行，每行里放3个单元格。

步骤1：编写数据分组函数 #

首先，我们需要把从GraphQL获取到的edges数组分成每3个元素一组的二维数组。你可以写一个简单的辅助函数：

const groupImages = (images, groupSize) => {
  const grouped = [];
  for (let i = 0; i < images.length; i += groupSize) {
    grouped.push(images.slice(i, i + groupSize));
  }
  return grouped;
};

或者用reduce来实现分组（两种方式选一个就行）：

const groupedEdges = data.allPictures.edges.reduce((acc, curr, index) => {
  const groupIndex = Math.floor(index / 3);
  if (!acc[groupIndex]) acc[groupIndex] = [];
  acc[groupIndex].push(curr);
  return acc;
}, []);

步骤2：调整Pictures组件的职责 #

原来的组件返回的是整行<tr>，现在我们需要它只返回单个单元格的内容，所以修改组件：

// 把组件名改成单数更贴合职责，比如Picture
const Picture = ({ node }) => {
  return (
    <td>
      <div className="feature-image-container">
        {/* 注意：你原来的targer拼写错了，应该是target，而且下划线是单下划线 */}
        <a href={node.picUrl} target="_blank">
          <img 
            className="img-fluid features-logo-img" 
            src={node.pic.responsiveResolution.src} 
          />
        </a>
      </div>
    </td>
  );
};

步骤3：修改父组件的渲染逻辑 #

现在我们用分组后的数据来渲染表格，外层映射分组数组生成行，内层映射每组的元素生成单元格：

<div className="feature-images-wrapper col-6">
  <table className="table">
    <tbody>
      {/* 先分组，再映射每组生成行 */}
      {groupImages(data.allPictures.edges, 3).map((rowEdges, rowIndex) => (
        <tr key={rowIndex}>
          {/* 映射当前行的每个图片，生成单元格 */}
          {rowEdges.map((edge, colIndex) => (
            <Picture 
              key={`row-${rowIndex}-col-${colIndex}`} 
              node={edge.node} 
            />
          ))}
        </tr>
      ))}
    </tbody>
  </table>
</div>

关键说明 #

• 分组逻辑确保每3张图片会被放到同一行里，当遍历到第4张时，自动创建新的行
• 给每个<tr>和<Picture>组件加上唯一的key，符合React的渲染规范，避免警告
• 修正了你代码里的小错误：targer="__blank"应该是target="_blank"，拼写和下划线格式都要改

这样修改后，你的9张图片就会自动排列成3行3列的表格啦！

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