如何映射在 objects 中有数组的 objects 数组

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

但我真正想做的是在迭代内部数组后放置一个 "divider".. 像这样

// 这行不通

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

我怎样才能正确映射它，以便我可以在 divider 迭代其 objects 之一的数组后放置一个 divider?

编辑：如果有一个不需要我将其包装在 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>
    )
  );

如何映射在 objects 中有数组的 objects 数组

How to map an Array of objects, that have arrays in the objects

javascript

ecmascript-5

ecmascript-6

reactjs