Question

我的问题在标题中有点难以解释..但在反应中，我试图映射一个看起来像这样的元素

[
  { 
    logicLayer: { name: someName, etc }, 
    subComps: [ { name: anotherName, etc },{ name: anotherName, etc } ]
  },
  { 
    logicLayer: { name: someName, etc }, 
    subComps: [ { name: anotherName, etc },{ name: anotherName, etc } ]
  },
  etc
]

到下拉按钮菜单

//这很好用

return (
        singular.buttonGroups.map(( buttonGroup, index1 ) =>
          buttonGroup.subComps.map(( subComp, index2 ) =>
            <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )
        )
      );

但我真正想做的是放一个＆＃34;分隔符＆＃34;在它迭代内部数组之后......就像这样

//这不起作用

return (
        singular.buttonGroups.map(( buttonGroup, index1 ) =>
          buttonGroup.subComps.map(( subComp, index2 ) =>
            <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )
            <MenuItem divider></MenuItem>  // THIS LINE DOESN'T WORK
        )
      );

如何正确映射这个，以便在迭代其中一个对象的数组后可以放置一个分隔符？

编辑：如果有一个解决方案并不要求我把它包装在一个div容器中会很好

Answer 1

你需要用一些容器包装它：

return (
    singular.buttonGroups.map(( buttonGroup, index1 ) =>
      <div> 
          {buttonGroup.subComps.map(
             ( subComp, index2 ) =>
                <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )}
          <MenuItem divider></MenuItem>  // THIS LINE DOESN'T WORK
      </div>
    )
  );

如何映射在对象中具有数组的对象数组

1 个答案: