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

这里有几个问题：

您正在使用forEach()来电而非map()来电。你正在创建ul组件，但是你没有对它们做任何事情，它们只是被扔掉了。
您没有从render方法返回任何组件，而是返回一个包含将生成组件的函数的对象。
您没有正确地将JS插入JSX。你必须用括号括起JS表达式。
修复＃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>
);

React js Mapping Menu＆amp;子菜单

2 个答案: