如何使用react js构建乘以3的动态项目集

Question

我正在尝试构建每个 3 个的动态垂直列表集。 对于这种方法，我使用了 %3 方法，但看起来没有在每组中打印数字。 尝试了 getOrderList 方法，但似乎哪里出错了，我仍在尽我所能使它工作。

预期输出 DOM

<div class="container">
   <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
   </div>
   <div class="parent">
      <div>4</div>
      <div>5</div>
      <div>6</div>
   </div>
   and so on...
</div>

下面是我尝试过的代码。

import ReactDOM from "react-dom";
import React from "react";

const lists = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "9",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15",
  "16",
  "17",
  "18",
  "19",
  "20"
];

const getOrderList = () => {
  const listsLength = lists.length;
  const division = Math.floor(listsLength / 3);
  const reminder = listsLength % 3;
  const noOfRows = division + reminder;
  const groupedList = [];
  for (let j = 0, counter = 1; j < listsLength; j += division, counter += 1) {
    const toLength =
      counter <= reminder ? j + division + reminder : j + division;
    const slicedArray = lists.slice(j, toLength);
    j = counter <= reminder ? j + reminder : j;
    groupedList.push(slicedArray);
  }
  const shuffledArray = [];
  for (let k = 0; k < noOfRows; k += 1) {
    for (let i = 0; i < groupedList.length; i += 1) {
      const groupObject = groupedList[i][k];
      if (groupObject) {
        shuffledArray.push(groupObject);
      }
    }
  }
  return shuffledArray;
};

const App = () => {
  const listItems = getOrderList();
  console.log(listItems);
  return (
    <div>
      {listItems.map((item, idx) => (
        <div key={idx}>
          <div>{item}</div>
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

演示链接

Answer 1

像这样的东西？

 const lists = ["1", "2", "3", "4", "5", "6", "7", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]; const result = []; for (const [idx, item] of lists.entries()) { idx % 3 === 0 && result.push([]); result[result.length - 1].push(item); } const App = () => { return ( <div style={{ display: "flex" }}> {result.map(list => ( <div class="parent" style={{ width: 20 }}> {list.map(item => ( <div >{item}</div> ))} </div> ))} </div> ); }; ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

我已经修改了您的代码以在每个第三个元素之后打印一个<br/> 。 您可以修改它以根据需要显示。

const App = () => (
  <div>
    {lists.map((item, idx) => {
      return (
        idx % 3 === 0 ? 
        (
          <div key={idx}>
            <br/>
            {item}
          </div>
        )
        :
       (
        <div key={idx}>
          {item}
        </div>
       )
      );
    })}
  </div>
);

这会给你一个类似于这个的输出

1
2
3

4
5
6

7
8
9

10
11
12

13
14
15

16
17
18

19
20

如果这没有帮助，请发表评论！

Answer 3

我想这就是您所需要的，我只会编写 javascript 部分。 当然，一旦你理解了它，你就可以在 react 上使用它。

const result = [] // This is the item you intend to eventually map through for react
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 11, 23, 34, 12, 1, 2, 3]

list.forEach(item => {
    if(!result.length){
        return result.push(new Set([item]))
    } else if (result[result.length - 1].size < 3){
        result[result.length-1].add(item)
    } else {
        result.push(new Set([item]))
    }
})

这会给你一个结果，比如 => [(1, 2, 3), (4, 5, 6), (7, 8, 9)...] 基本上是一个集合数组。

如果您愿意，当然可以使代码更小