Question

我有一个8个图像的列表，我想在网格中呈现：

----- ----- ----- -----
|   | |   | |   | |   |
|   | |   | |   | |   |
----- ----- ----- -----
----- ----- ----- -----
|   | |   | |   | |   |
|   | |   | |   | |   |
----- ----- ----- -----

我用Bootstrap 3：行和列

来做

<div className="row">

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>
</div> <!-- END row -->

<div className="row">

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

    <div className="col-xs-3">
        <img src="..." alt="..." />
    </div>

</div> <!-- END row -->

所以我需要循环遍历列表，每个4个图像需要将它们连成一行。这用作行之间的间隔（20px）。

在普通的JS中，我会在循环并使用迭代器索引作为条件时连接一个标记字符串。但据我所知，我无法在JSX中这样做。

那么我如何使用JSX做到这一点？

Answer 1

我想，你不需要两排。 Bootstrap会自动将第5张图像移动到下一行。相反，你应该清除类。

    let arr = [1,2,3,4,5,6,7,8];
     let rows= [];
         arr.forEach((val,index)=>{
        rows.push(<div key={index} className="col-xs-3">
            <img src="..." alt="..." />
        </div>
  })

    <div className="row">
    {
     rows
    }

 </div>

Answer 2

首先，您需要将图像分组为4.您可以使用下面的svg { position: absolute; width: 100%; height: 100%; }功能。它基本上将您的图像阵列切成4组。接下来，您需要遍历您的组以为每个组创建一行。然后在组内部，您需要遍历图像，每个图像的列。

groupBy

请参阅jsbin

JSX：渲染图像网格

2 个答案: