React: Render new row every 4th column

Question

Я использую react, и я хочу, чтобы 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>) 
); 
    return (
    <div> 
     {content} 
    </div> 
); 
} 

Я попытался с подходом, передав в состоянии, похожем это:

if (product.id % 4 == 1), вокруг колонн, но это не работает ...

Это то, что я хочу, чтобы это произошло:

<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> 

Answer 1

написать его как Тхи с:

function Product(props) { 
    let content = []; 
    props.products.forEach((product, i) =>{ 
     if((i+1) % 4 == 0){ 
     content.push(
      <div className="row" key={product.id}>  
      <article key={product.id} className="col-md-3"></article> 
      </div> 
     ) 
     }else{ 
      content.push(<article key={product.id} className="col-md-3"></article>); 
     } 
    }); 
    return (
    <div> 
     {content} 
    </div> 
); 
} 

Answer 2

1. Группа свои товары в ряды (самое большее) 4-х элементов, т.е.

   [1,2,3,4,5,6,7,8] => [ [1, 2, 3, 4], [5, 6, 7, 8 ] ]

2. итерацию по группам для генерации строк, а во внутренней итерации петли над предметами для отображения столбцов

Рассчитать количество строк, данных 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) => { 
    // 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> 
    ); 
} 

Answer 3

Вы хотите, чтобы обернуть новую строку для каждых 4 столбцов, верно?

Попробуйте

render() { 
 
\t \t const products = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
 
\t \t let rowContents = []; 
 
\t \t const contents = products.reduce((acc, p, i) => { 
 
\t \t \t rowContents.push(<div key={i} className="col col-md-3">Col {p}</div>); 
 
\t \t \t if (i % 4 === 3) { 
 
\t \t \t \t acc.push(<div className="row">{rowContents}</div>); 
 
\t \t \t \t rowContents = []; 
 
\t \t \t } 
 
\t \t \t return acc; 
 
\t \t },[]) 
 
     contents.push(<div className="row">{rowContents}</div>); 
 

 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t {contents} 
 
\t \t \t </div> 
 
\t \t) 
 
\t }