Следование шаблону при рендеринге предметов

Question

В моем приложении реакции я отображаю имена рецептов и их изображения, они отображаются внутри строки, но дело в том, что они должны мешать каждому элементу внутри столбца 4 в первом ряду, а затем каждому элементу в столбце. 3 во втором ряду, затем третий возвращается к col-4, затем к четвертому ряду col-3 и т. Д., Они визуализируются, но как я собираюсь изменить распределение столбцов внутри строк? вот карта:

 renderRecipes() {
    return this.state.recipes.map(recipe => (
     <div class="row">
     //col should be changed here, once col-4 and in the next col-3, and to keep the pattern going
      <div class="col-4"> 
        <img src={recipe.img}/>
        <h3>{recipe.name}</h3>
       </div>
     </div>
    ));
  }  

Answer 1

Вы почти на месте, вы можете добавить индекс i на карту и посмотреть, находимся ли мы в нечетной или четной строке. Если нечетное, то i % 2 будет оставаться 1, и вы можете выбрать, какой класс добавить, основываясь на этом логическом значении.

 renderRecipes() {
    return this.state.recipes.map((recipe,i) => (
     <div class="row">
     //col should be changed here, once col-4 and in the next col-3, and to keep the pattern going
      <div class="{i % 2 === 1 ? 'col-3':'col-4'}"> 
        <img src={recipe.img}/>
        <h3>{recipe.name}</h3>
       </div>
     </div>
    ));
  } 

Редактировать Bootstrap перенесет col s, которые превышают строку, на следующую строку. Вы можете использовать это для печати всех col по горизонтали, и они будут перенесены в правильные строки. Вам просто нужно найти математику, которая определит, находитесь ли вы в ряду с 3 или 4 интервалами.

 renderRecipes() {
    let isThree = function(i){
      //Here add algorithm to determine if you are in a 3 row or a 4 row.
    }

    return (
     <div class="row">
       this.state.recipes.map((recipe,i) => (

         <div class="{isThree(i) ? 'col-3':'col-4'}"> 
           <img src={recipe.img}/>
           <h3>{recipe.name}</h3>
         </div>

       ));
     </div>
    )


  }