3 回答

TA貢獻1795條經驗 獲得超7個贊
制作另一個var“串行組”。在循環之外創建另一個計數器 j=1 。在循環中將序列添加到序列組,然后如果 j 為 3,則將序列的 div 推入序列并將 j 重置為 1。所有這一切都說,你最好使用 CSS 來完成這種格式化......這是一個 CSS 示例:循環外:
const serialdivstyle = {
display:'inline-block',
width: '28%',
margin: '2%',
border-left: '1px solid black',
text-align: 'center'
};
循環內部(注意刪除條形字符):
var serial = (
<div style={serialdivstyle}>
{scannedItems[i]}
</div>
)

TA貢獻1757條經驗 獲得超8個贊
我的想法是將元素數組分塊,然后生成模板。
const chunk = (elements, groupSize) =>
elements.reduce((acc, nextElement, index) => {
const row = Math.floor(index / groupSize);
if (acc[row] === undefined) {
acc.push([nextElement]);
} else {
acc[row].push(nextElement);
}
return acc;
}, []);
const buildLayout = elements => (
<div className="table">
{elements.map((row, rowIndex) => {
return (
<div className="row" key={rowIndex}>
{row.map(column => (
<div className="column" key={column}>
{column}
</div>
))}
</div>
);
})}
</div>
);
const elements = [1, 2, 3, 4, 5, 6, 7];
const chunks = chunk(elements, 3);
const layout = buildLayout(chunks);

TA貢獻2051條經驗 獲得超10個贊
添加回答
舉報