在地图中使用地图有条件地渲染数据
Using a map within a map conditionally rendering data
我目前正在映射一些本地 JSON 数据并尝试根据其名称呈现每个对象,
目前,我已经映射它显示每个名称,现在有条件地检查和映射每个特定数据,只是想在这里获得正确的语法。
import menu from "./data/menudata";
const MenuBar = () => {
return (
<MenuContainer>
{menu.children.map((outerMap, i) => (
<Dropdown>
<DropBtn key={i}>
<h2>{outerMap.name}</h2>
</DropBtn>
<DropdownContent>
{outerMap.name === 'Account' && (
{menu.firstchild.map((innerMap, i) =>
<li>{firstchild.name}</li>
)}
)
}
</DropdownContent>
</Dropdown>
))}
</MenuContainer>
);
};
export default MenuBar;
innermap 是我无法编译的地方,这里还有 JSON 代码片段,
"name": "menu",
"children": [
{
"name": "Account",
"firstchild": [
{
"name": "Preference"
},
{
"name": "Contact"
},
{
"name": "Manage"
}
]
},
{
"name": "Design",
"secondchild": [
{
"name": "Theme"
},
{
"name": "Gallery"
},
{
"name": "Template"
}
]
},
谢谢
应该是outerMap.firstchild
而不是menu.firstchild
。
{outerMap.name === 'Account' && outerMap.firstchild.map((innerMap, i) => ...)}
我目前正在映射一些本地 JSON 数据并尝试根据其名称呈现每个对象,
目前,我已经映射它显示每个名称,现在有条件地检查和映射每个特定数据,只是想在这里获得正确的语法。
import menu from "./data/menudata";
const MenuBar = () => {
return (
<MenuContainer>
{menu.children.map((outerMap, i) => (
<Dropdown>
<DropBtn key={i}>
<h2>{outerMap.name}</h2>
</DropBtn>
<DropdownContent>
{outerMap.name === 'Account' && (
{menu.firstchild.map((innerMap, i) =>
<li>{firstchild.name}</li>
)}
)
}
</DropdownContent>
</Dropdown>
))}
</MenuContainer>
);
};
export default MenuBar;
innermap 是我无法编译的地方,这里还有 JSON 代码片段,
"name": "menu",
"children": [
{
"name": "Account",
"firstchild": [
{
"name": "Preference"
},
{
"name": "Contact"
},
{
"name": "Manage"
}
]
},
{
"name": "Design",
"secondchild": [
{
"name": "Theme"
},
{
"name": "Gallery"
},
{
"name": "Template"
}
]
},
谢谢
应该是outerMap.firstchild
而不是menu.firstchild
。
{outerMap.name === 'Account' && outerMap.firstchild.map((innerMap, i) => ...)}