React js 映射菜单和子菜单

Question

这是我的代码：

 ......
  render() {
    var menuItems = [
        {name: 'Item 1', subMenus: [{name: 'Sub Menu 1-2'}, {name: 'Sub Menu 1-2'}, {name: 'Sub Menu 1-3'}]},
        {name: 'Item 2'},
        {name: 'Item 3'},
        {name: 'Item 4', subMenus: [{name: 'Sub Menu 4-2'}, {name: 'Sub Menu 4-2'}, {name: 'Sub Menu 4-3'}]},
        {name: 'Item 5'}
    ]
    var menu  = function () {
        return (
            menuItems.forEach(function (menuItem, i) {
                if (menuItem.subMenus != undefined) {
                    <ul key={i}>menuItem.name
                    menuItem.subMenus.forEach(function (subMenu, i) {
                            <li key={i}>subMenu.name</li>
                        }
                        </ul>
                } else {
                    // do nothing
                }
            })
        )
    }
   return({menu})
   ......

显然，它不起作用。

在嵌套菜单中循环的正确程序是什么？提前谢谢。

Answer 1

  return (
        <div>
            {/* GJK forgot to encapsulate mapping in curly braces */} 
            {menuItems.map(function(menuItem, i) {
                if (menuItem.subMenus != undefined) {
                    return (
                        <ul key={i}>{menuItem.name}
                            {menuItem.subMenus.map(function(subMenu, i) {
                                return <li key={i}>{subMenu.name}</li>;
                            })}
                        </ul>
                    )
                } else {
                    return (
                        <ul key={i}>{menuItem.name}</ul>
                    )
                }
            })};
</div>)

Answer 2

这里有几个问题：

1. 您使用的是forEach()调用，而不是map()调用。您正在创建ul组件，但没有对它们执行任何操作，它们只是被丢弃了
2. 您没有从render方法返回任何组件，而是返回一个包含将生成组件的函数的对象
3. 您没有正确地将JS插入到JSX中。你必须用括号把JS表达式括起来
4. 修复#1之后，当您只能返回单个组件时，您将从render返回一个组件列表。我将所有内容都封装在div中以解决该问题

这就是您所需要的：

return (
    <div>
        {menuItems.map(function(menuItem, i) {
            if (menuItem.subMenus != undefined) {
                return (
                    <ul key={i}>
                        {/* Not sure this is what you meant, but I added it anyway */}
                        {menuItem.name}
                        {menuItem.subMenus.map(function(subMenu, i) {
                            return <li key={i}>{subMenu.name}</li>;
                        })}
                    </ul>
                );
            } else {
                return undefined;
            }
        })}
    </div>
);