javascript - 如何循环和创建动态 Bootstrap 网格

Question

我有从外部 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; 

Answer 1

您在这里所做的是，您正在创建一整行，每四个数组元素只包含一张卡片。

您需要的是将元素分组到行中。一种可能的方法是使用如下函数对它们进行分组:

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>
    )
  );