Reactjs 在房间里摆桌子

我有9张图片，我想现在映射，并制作3x3表格。但是，我不太确定应该如何构建代码

如何编写代码，例如“如果一行中有3张图片，则创建一个新行”？我不确定逻辑应该是怎样的。我从graphql获取所有数据

现在，我有：

<div className="feature-images-wrapper col-6">
      <table className="table">
        <tbody>
          {data.allPictures.edges.map(edge => (
            <Pictures node={edge.node} />
          ))}
        </tbody>
      </table>
    </div>

{data.allPictures.edges.map（edge=>(
))}

在tbody标记中，我映射图片组件，即：

const Pictures = ({ node }) => {

return (
    <tr>
      <td>
        <div className="feature-image-container">
          <a href={node.picUrl} targer="__blank">
            <img
              className="img-fluid features-logo-img"
              src={node.pic.responsiveResolution.src}
            />
          </a>
        </div>
      </td>
    </tr>
  );
};

const图片=（{node}）=>{
返回(
);
};

这给了我9行，每行一张图片。我觉得应该有一个条件语句来制作一个3x3表，用这个？？我不知道我该如何建造它

---

救命：）

创建两个新组件，行和列。 列：发送一个图像url作为道具，它应该呈现它。 行：发送大小为3的数组，共3个图像url，它将发送到3列组件

现在从主组件渲染3行组件

这是3乘3的硬编码。你也可以让它充满活力。行内组件渲染列组件等于props.imageUrl.length中的元素数

你可以用

只需在props.imageUrl.length上循环，就可以使用react boostrap的grid/row/col。

You can use react-boostrap's grid/row/col.

Below is a sample code I have used to demonstrate 3*3 matrix using grid(react-bootstrap)

    import {Grid, Col, Row} from 'react-bootstrap';

     const renderImages = [...Array(3)].map((val) => {
                return <Row className="show-grid">
                    <br />
                    <Col md={3}>
                        <img src={placeholder} />

                    </Col>
                    <Col md={3}>
                        <img src={placeholder} />

                    </Col>
                    <Col md={3}>
                        <img src={placeholder} />

                    </Col>

                </Row>
            })

            const gridInstance = (
                <Grid>
                    {renderImages}
                </Grid>
            );

下面是一个示例代码，我用它演示了使用grid的3*3矩阵（react bootstrap） 从'react bootstrap'导入{Grid，Col，Row}； 常量渲染=[…数组（3）].map（（val）=>{ 返回
}) 常量gridInstance=( {renderImages} ); 最后，您可以使用gridInstance变量来显示

---

希望这有帮助：嗨！谢谢你的回答。但是有一个问题：[…数组（3）]在代码中代表什么？数组（3）给出长度，加上[…数组（3）]可以进行迭代。我们还可以使用Array.from（{length:3}）迭代3次。仅供参考，Array.from来自ES6。有关更多信息，请查看-谢谢John！帮助了很多：）乐于助人：）。。快乐编码：D汉克斯：）你也是！