[英]How to build dynamic items set multiply by 3 using react js
Am trying to build dynamic vertical list set of 3 each.我正在尝试构建每个 3 个的动态垂直列表集。 For this approach I have used %3 approach, but looks like not at numbers are printed in each set.
对于这种方法,我使用了 %3 方法,但看起来没有在每组中打印数字。 Tried getOrderList method, but seems somewhere its going wrong, still doing my best to make it work.
尝试了 getOrderList 方法,但似乎哪里出错了,我仍在尽我所能使它工作。
Expected Output DOM预期输出 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>
Below is code what I have tried.下面是我尝试过的代码。
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"));
Something like this?像这样的东西?
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>
I have modified your code to print a <br/>
after every 3rd element.我已经修改了您的代码以在每个第三个元素之后打印一个
<br/>
。 You can modify it to display as you desire.您可以修改它以根据需要显示。
const App = () => (
<div>
{lists.map((item, idx) => {
return (
idx % 3 === 0 ?
(
<div key={idx}>
<br/>
{item}
</div>
)
:
(
<div key={idx}>
{item}
</div>
)
);
})}
</div>
);
This would give you an output similar to this这会给你一个类似于这个的输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Drop in a comment if this does not help!如果这没有帮助,请发表评论!
I guess this is what you need, I would only be writing the javascript part.我想这就是您所需要的,我只会编写 javascript 部分。 Sure you can use it on react once you understand it.
当然,一旦你理解了它,你就可以在 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]))
}
})
This would give you a result like => [(1, 2, 3), (4, 5, 6), (7, 8, 9)...] basically an array of sets.这会给你一个结果,比如 => [(1, 2, 3), (4, 5, 6), (7, 8, 9)...] 基本上是一个集合数组。
Sure you can make the code smaller if you want如果您愿意,当然可以使代码更小
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.