javascript - 渲染项目时遵循一种模式

Question

在我的 React 应用程序中，我正在渲染食谱名称和它们的图像，它们在一行内渲染，但问题是它们应该被打扰第一行 col-4 中的每个项目，然后是 col- 中的每个项目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

你快到了，你可以在 map 上添加一个 i 索引，看看我们是在奇数行还是偶数行。如果为奇数，则 i % 2 将余下 1，您可以根据此 bool 值选择要添加的类。

 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 包装到下一行。您可以使用它来水平打印所有 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>
    )


  }