Css 如何在循环中有条件地添加包装器？

实际上，我的问题是关于React Native的，但我认为它与React类似

我尝试创建动态菜单，数组中有循环，如下所示：

_renderMenu(){
  let menu = this.state.menu.map((el, index)=>{
    if(index==0){
      return(
        <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
      )
    } else {
      //Wrap the rest with <View style={MyStyle}>
      return(
        <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
      )
      //</View>
    }
  })
  return(
    <View style={{flex:1, padding:5}}>
      {menu}
    </View>
  )
}

   <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
   <View style={{flexDirection:'row', flex:1}}> //if index!==0 wrap the rest with this view
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
   </View>

我的问题是：如何在使用

map

时有条件地添加另一个

假设数组中有4个值，我尝试过这样做：

_renderMenu(){
  let menu = this.state.menu.map((el, index)=>{
    if(index==0){
      return(
        <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
      )
    } else {
      //Wrap the rest with <View style={MyStyle}>
      return(
        <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
      )
      //</View>
    }
  })
  return(
    <View style={{flex:1, padding:5}}>
      {menu}
    </View>
  )
}

   <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
   <View style={{flexDirection:'row', flex:1}}> //if index!==0 wrap the rest with this view
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
   </View>

\u renderMenu（）{
让menu=this.state.menu.map（（el，index）=>{
如果（索引==0）{
返回(
)
}否则{
//把剩下的包起来
返回(
)
//
}
})
返回(
{menu}
)
}

我的循环模式如下：

_renderMenu(){
  let menu = this.state.menu.map((el, index)=>{
    if(index==0){
      return(
        <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
      )
    } else {
      //Wrap the rest with <View style={MyStyle}>
      return(
        <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
      )
      //</View>
    }
  })
  return(
    <View style={{flex:1, padding:5}}>
      {menu}
    </View>
  )
}

   <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
   <View style={{flexDirection:'row', flex:1}}> //if index!==0 wrap the rest with this view
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
     <View style={{flex:1, margin:5, borderRadius:5, backgroundColor:Color.amber_200}}/>
   </View>

//如果索引==0使用此视图包装其余部分

---

有没有可能有条件地像我的案例一样？

基于以上评论，这里有一个解决您问题的方法：

首先，您需要将

lodash

添加到项目中，以使用

.chunck

方法：

\u renderMenu（）{
常量菜单项=（项目、索引）=>(
{item}
)
const splitArray=uz.chunk（this.state.menu.slice（1），3）
返回(
{menuItem（this.state.menu[0]，0）}
{
splitArray.map（（数组，索引）=>{
返回(
{array.map（（element，elementIndex）=>menuItem（element，（elementIndex*index）+elementIndex+1））}
)
})
}
)
}

拼接

将跳过指定数量的元素，在本例中是第一个元素。我们将单独渲染第一个菜单项，然后渲染其他项

---

现在，对于键，我试图使用

*+

公式根据两个索引生成它们，以保持其唯一性。

您可以添加您的菜单对象（

this.state.menu

）？您可以使用

[0,1,2,3]更改
this.state.menu
。映射（…）

@rockhalilb但想法如下：为了拥有“动态”渲染机制，你需要有一个好的结构。Have

menu=[1,2,3]

是错误的，它应该是这样的：

menu=[{title:1}，{title:2，children:[{title:3}]}]

。如果第一个是这样的话，那么你怎么做就有点错误，但也可以不做。不需要，我误解了这个问题，现在写了一个答案：-）我想到了那个黑客，但是每当数组的值超过4时，我就需要保持这个模式，谢谢你的帮助：）@flix所以每行应该有3个项目？是的。如果值为6，则有1个项目行、3个项目行和1个项目行、1个项目行，大小为flex/3