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

您快到了，您可以向地图添加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>
    ));
  }

编辑引导程序会将超出该行的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>
    )


  }

渲染项目时遵循模式

1 个答案: