响应js映射菜单和子菜单
响应js映射菜单和子菜单
提问于 2015-09-05 15:41:43
这里是我的代码：
......
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})
......显然，这是行不通的。
通过嵌套菜单循环的正确过程是什么？提前谢谢。
回答 2
Stack Overflow用户
发布于 2015-09-05 16:00:14
您在这里有几个问题：
- 您使用的是
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>
);Stack Overflow用户
发布于 2015-09-05 16:20:14
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>)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32414882
复制相关文章
相似问题
腾讯云开发者
