javascript - 使用 React 在每两个元素之后创建新的 ul

Question

我正在制作一个订餐网站。在首页上，我从我的数据库中获取所有食物图像，然后正如您在下面的代码中看到的那样，我使用 docs.map 渲染所有图像。问题是，我想在 ul 标签内最多有两个图像，但现在所有图像都放在一个 ul 中。所以如果有 6 张图像，那么也会有 3 个 ul。

<div className="cards__wrapper">
          <ul className="cards__items">
            {docs &&
              docs.map((doc) => (
                <CardItem
                  src={doc.url}
                  key={doc.id}
                  text={doc.imageText}
                  price={doc.price}
                  id={doc.id}
                ></CardItem>
              ))}
          </ul>
        </div>

Answer 1

您可以将数组拆分为所需的 block 并基于此呈现数据。 我已经为此做了一个例子。你可以查看this

拆分函数

 var chunks = function (array, size = 2) {
    var results = [];
    while (array.length) {
      results.push(array.splice(0, size));
    }
    return results;
  };

 const data = chunks(lists, 2);

渲染:

   {data.map((childs, index) => {
        return (
          <ul>
            {childs.map((c, cindex) => {
              return <li>{c + index + cindex}</li>;
            })}
          </ul>
        );
      })}