如何循环并创建动态的Bootstrap网格

Question

如何循环并创建动态的Bootstrap网格

3

我正在从外部api中提取数据。我想将这些数据映射到SimpleCards组件，并使用bootstrap网格循环和呈现它。意味着对于每一行，我希望有4列（或2个小设备的列）。如何动态地循环和创建此内容？我无法理解此内容并尝试进行以下操作，但目前不起作用。非常感谢任何帮助或更好的方法。谢谢。

循环后，我希望它呈现如下：

    <div className="row">
      <div className="col-md-6 col-sm-6 col-lg-3 format">
        <SimpleCard/>
      </div>
      <div className="col-md-6 col-sm-6 col-lg-3 format">
        <SimpleCard/>
      </div>
      <div className="col-md-6 col-sm-6 col-lg-3 format">
        <SimpleCard/>
      </div>
      <div className="col-md-6 col-sm-6 col-lg-3 format">
        <SimpleCard/>
      </div>
    </div>
  <div className="row">
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
  </div>
  <div className="row">
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
    <div className="col-md-6 col-sm-6 col-lg-3 format">
      <SimpleCard/>
    </div>
  </div>

我试图通过以下循环来实现上述目标（在上面的示例中，我展示了12次重复。当我进行实际调用时，我会得到更多，因此硬编码不可行）：

这不起作用，我最终什么也看不见。说实话，我认为这没有意义，因此并不感到惊讶，但无法找出正确的循环方法。请协助。

const CardList = props => {
  const list = [0,1,2,3,4,5,6,7,8,9,10,11,12]; // just faking to get 12 interations.
  // in actual case this would be an api call's result. 
  return (
    <div className="row">
      {
        list.forEach((item, index) => {
          if (index % 4 === 0 && index !== 0){
            return (
              <div className="row">
                <div className="col-md-6 col-sm-6 col-lg-3 format">
                  <SimpleCard/>
                </div>
              </div>
            )
          } else {
            return (
              <div className="col-md-6 col-sm-6 col-lg-3 format">
                <SimpleCard/>
              </div>
            )
          }
        })
      }
    </div>
  );
}

export default CardList;

- kar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikola Dragić · Accepted Answer

你在这里做的是，对于每四个数组元素，创建一个只有一张卡片的整行。

你需要将元素分组到行中。一种可能的方法是使用以下函数进行分组：

function chunkArray(arr, size) {
  var groupedArray = [];
  for(var i = 0; i < arr.length; i += size) {
    groupedArray.push(arr.slice(i, i+size));
  }
  return groupedArray ;
}

现在您可以拥有嵌套映射：

  return (
    chunkArray(list, 4).map(
      chunk =>
        <div class="row">
          {chunk.map(item =>
            <div className="col-md-6 col-sm-6 col-lg-3 format">
              <SimpleCard/>
            </div>
          )}
        </div>
    )
  );