JSX：渲染图像网格

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

首先，您需要将图像按 4 分组。您可以使用下面的 groupBy 函数。它基本上将您的图像阵列分成 4 个组。 接下来，您需要遍历您的组以为每个组创建一行。 然后在组内，您需要遍历图像，每个图像列。

var images = ["https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/","https://baconmockup.com/300/200/"];
function render(){
  var imageGroups = groupBy(4, images);
  return (<div>
            {imageGroups.map(renderRow)}
          </div>);
}

function renderRow(group, index){
  return (<div className="row" key={index}>
            {group.map(renderColumn)}
          </div>);
}

function renderColumn(image, index){
  return (<div className="col-xs-3" key={index}>
            <img src={image} />
         </div>);
}

function groupBy(amountOfItemsPerGroup, items){
  var groups = [], 
    group, 
    total = items.length;
  for (var i=0; i < total; i += amountOfItemsPerGroup) {
    group = items.slice(i, i+amountOfItemsPerGroup);
    groups.push(group);
  }
  return groups;
}

ReactDOM.render(
  render(),
  document.getElementById('root')
);

见jsbin

Answer 2

我认为，您不需要两排。 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>