Question

所以我递归地浏览我的嵌套对象，将菜单项推送到我创建的菜单，如下代码所示：

let menu = [];
this.createDropDown(menu, objects)
return(menu);

createDropDown = (menu, objects) => {
if(Object.keys(objects).length === 1){
  menu.push(
  <Menu.Item key={Object.keys(objects)}>{Object.keys(objects)}</Menu.Item>
  );
}else{
  for(var k in objects){
    menu.push(<Menu.Item key = {Object.keys(objects[k])}>{k}</Menu.Item>,
    <SubMenu>{this.createDropDown(menu, objects[k])}</SubMenu>);
  }
}
}

我创建的菜单返回到渲染：

render(
     return(
      <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
      {this.createMenu()}
      </Menu>
    );
)

UI输出一个巨大的混乱，我直接用return（）尝试它（没有创建菜单并推送到它，但我不能遍历所有对象，因为进程终止于第一个“Object.keys（对象））.length === 1“遇到”，并显示项目和子菜单。知道为什么React会这样做吗？

将JSX推送到数组

0 个答案: