2017-10-10 115 views
-2

我有一个项目数组,9确切附在我的状态:阵营:遍历数据并创建三个项目排在一排

state = { 
    menuItems: [ 
     { 
      id: 0, 
      name: 'Foods', 
      iconSrc: 'food.jpg' 
     }, 
     { 
      id: 1, 
      name: 'Drinks', 
      iconSrc: 'drinks.jpg' 
     }, 
     { 
      id: 2, 
      name: 'Snacks', 
      iconSrc: 'snacks.jpg' 
     } 
    ] 

,并要循环他们,但我有9数组中的项目,要做到以下几点:组阵列中每三个项目下的一个新的div,像这样:

<div class="row-container"> 
    <div class="col-4"> 
     <div class="col-2">Item 1</div> 
     <div class="col-2">Item 2</div> 
     <div class="col-2">Item 3</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">Item 4</div> 
     <div class="col-2">Item 5</div> 
     <div class="col-2">Item 6</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">Item 7</div> 
     <div class="col-2">Item 8</div> 
     <div class="col-2">Item 9</div> 
    </div> 
</div> 

如何做到这一点使用内无反应的地图功能?

回答

1

您可以尝试将数组转换为包含三个元素的数组的子集,然后映射它们以吐出您想要的东西。

看看这里的一个例子Split array into chunks of N length

+0

链接使我最好的解决我的问题。谢谢。 – Beto

1

你可以使用modulus(Reminder)。 Modulus会告诉你提供给定整数的除法。

求余运算符返回余遗留当一个操作数 由第二操作数划分。它始终采取分红的标志,而不是除数。它采用了内置modulo功能 产生的结果,这是var2

var1 的整数余例

this.state.menuItems.map((item, index) => { 
    if (((index + 1) % 3) === 1) { 

    return (
     <div className="col-4"> 
     <div className="col-2">{item.name}</div> 
    ); 

    } else if (((index + 1) % 3) === 2) { 

    return (<div className="col-2">{item.name}</div>); 

    } else if (((index + 1) % 3) === 0) { 

    return (
     <div className="col-2">{item.name}</div> 
     </div> 
    ); 

    } 
}); 
+0

请帮我一个问题重新加载listview反应原生:https://stackoverflow.com/questions/46658124/checked-unchecked-doesnt-working-in-listview-react-native/46658636#46658636 –

+0

你会如何得到上面在这样的工作流: {this.state.content.map((ITEMNAME,指数)=>(

{如果(itemName.title === '食物'){}

{ITEMNAME。标题}

{}}
但是,这并不工作,我需要帮助得到这个工作。 – Beto

2

如果我正确理解你的问题,这应该工作,让我知道如果这是你的意思请

renderMenuItems() { 
    let items = this.state.menuItems.map((item, index) => { 
     return ( 
     <div class="col-4" key={item.id}> 
      <div class="col-2">{item.id}</div> 
      <div class="col-2">{item.name}</div> 
      <div class="col-2">{item.iconSrc}</div> 
     </div> 
     ); 

    }); 
    return items; 
} 

然后里面渲染:

<div class="row-container"> 
    {this.renderMenuItems()} 
</div> 

这将产生:

<div class="row-container"> 
    <div class="col-4"> 
     <div class="col-2">0</div> 
     <div class="col-2">Foods</div> 
     <div class="col-2">food.jpg</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">1</div> 
     <div class="col-2">Drinks</div> 
     <div class="col-2">drinks.jpg</div> 
    </div> 
    <div class="col-4"> 
     <div class="col-2">2</div> 
     <div class="col-2">Snacks</div> 
     <div class="col-2">snacks.jpg</div> 
    </div> 
</div> 
+0

+1'.MAP()',这是我使用无处不在,简单而有效。这是对于如此明确的指示也是一个很好的答案提出这个问题 –