React:每 4 列渲染一次新行
[英] React: Render new row every 4th column
本文介绍了React:每 4 列渲染一次新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 react 并且我想每 4 列render 一个新行.
我的代码:
function Product(props) {const content = props.products.map((product) => (<div className="row" key={product.id}><article key={product.id} className="col-md-3"></article>
));返回 (<div>{内容}
);}
我通过传入一个看起来像这样的条件来尝试使用这种方法:
if (product.id % 4 == 1)，围绕列，但它不起作用...
这就是我想要发生的:
<div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div>
<div class="row"><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div><div class="col-md-3"></div>
解决方案
将您的产品分成(最多)4 个元素的行，即
[1,2,3,4,5,6,7,8] =>[ [1, 2, 3, 4], [5, 6, 7, 8 ] ]
遍历组以生成行，并在内部循环中遍历项目以显示列
要计算行数，假设每行 4 个项目，请使用 Math.ceil(props.products.length/4).然后创建一个行数组.给定 2 行(8 个项目):Array(2).由于您不能 map 未初始化元素的数组，您可以使用扩展语法: [...Array(2)] 返回 [ undefined, undefined].
现在您可以将这些 undefined 条目映射到行中:对于每一行，从产品中获取 4 个元素:[ undefined, undefined ].map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ) ) (编辑注释更改为 slice 因为 splice 变异原始数组).结果是一个数组数组(项目行).
您可以遍历行，并在每次迭代中遍历给定行中的项目.
https://jsfiddle.net/dya52m8y/2/
const Products = (props) =>{//N 个元素的数组，其中 N 是所需的行数const rows = [...Array( Math.ceil(props.products.length/4) )];//将产品分块到行数组中const productRows = rows.map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ););//将行映射为 div.rowconst content = productRows.map((row, idx) => (<div className="row" key={idx}>//将行中的产品映射为 article.col-md-3{ row.map( product => <article key={product} className="col-md-3">{ product }</article>)}
));返回 (<div>{内容}
);}
I'm using react and I want to render a new row every 4th column.
My code:
function Product(props) {
const content = props.products.map((product) => (
<div className="row" key={product.id}>
<article key={product.id} className="col-md-3"></article>
</div> )
);
return (
<div>
{content}
</div>
);
}
I tried with the approach by passing in a condition that looked like this:
if (product.id % 4 == 1), around the columns, but it doesn't work...
This is what I want to happen:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
解决方案
Group your products into rows of (at most) 4 elements, i.e.
[1,2,3,4,5,6,7,8] => [ [1, 2, 3, 4], [5, 6, 7, 8 ] ]
Iterate over the groups to generate rows, and in an inner loop iterate over the items to display columns
To calculate the number of rows, given 4 items per row, use Math.ceil(props.products.length / 4). Then create an array of rows. Given 2 rows (for 8 items): Array(2). Since you can't map an array of uninitialized elements, you can use spread syntax: [...Array(2)] which returns [ undefined, undefined ].
Now you can map these undefined entries into rows: for each row take 4 elements from products: [ undefined, undefined ].map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ) ) (edit note changed to slice since splice mutates the original array). The result is an array of arrays (rows of items).
You can iterate over the rows, and inside each iteration iterate over the items in given row.
https://jsfiddle.net/dya52m8y/2/
const Products = (props) => {
// array of N elements, where N is the number of rows needed
const rows = [...Array( Math.ceil(props.products.length / 4) )];
// chunk the products into the array of rows
const productRows = rows.map( (row, idx) => props.products.slice(idx * 4, idx * 4 + 4) ); );
// map the rows as div.row
const content = productRows.map((row, idx) => (
<div className="row" key={idx}>
// map products in the row as article.col-md-3
{ row.map( product => <article key={product} className="col-md-3">{ product }</article> )}
</div> )
);
return (
<div>
{content}
</div>
);
}
这篇关于React:每 4 列渲染一次新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
