Javascript 渲染项目时遵循模式

在我的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>
    ));
  }  

renderRecipes（）{
返回此.state.recipes.map（recipe=>(
//应在此处更改col-4，并在下一个col-3中更改col-4，以保持模式继续
{recipe.name}
));
}  

你就快到了，你可以在地图上添加一个

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>
    ));
  } 

---

您的代码在每行中放置一项，第一行应包含3项col-4，第二行应包含4项col-3，在这里的夜间，如果明天早上无法解决，请告诉我您能帮忙吗？

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


  }