迭代嵌套的javascript对象并在jsx中渲染的最高效方法是什么
我想将这个 React 组件内的嵌套 JS 对象渲染为 ol > li > ol > li 格式，并且嵌套对象应按级别缩进。
JSON样本数据：https ://jsfiddle.net/39o8nrpk/
如果我能获得使用 JavaScript 以高性能方式呈现这些数据的解决方案，那将是非常有帮助的。
{
"data": {
"content": "Page Title",
"url": "/",
"categories": [
{
"href": "/",
"name": "level 1",
"category": [
]
},
{
"href": "/",
"name": "level 1",
"category": [
{
"href": "/",
"name": "level 2",
"category": [
]
},
{
"href": "/",
"name": "level 2",
"category": [{
"href": "/",
"name": "level 3"
},
{
"href": "/",
"name": "level 3"
},
{
"href": "/",
"name": "level 3"
}
]
},
{
"href": "/",
"name": "level 2",
"category": [
]
},
{
"href": "/",
"name": "level2",
"category": [{
"href": "/",
"name": "level3"
},
{
"href": "/",
"name": "level3"
},
{
"href": "/",
"name": "level3"
}
]
}
]
}
]
}
}
墨色风雨2回答
-
翻翻过去那场雪
如果将代码拆分为不同的组件会更好，每个组件负责呈现特定的类别级别。一旦你有了这个场景，也许你应该尝试使用 recursion 来实现它，在我看来这将是最好的解决方案。const CategoryLevel3 = ({ href, name}) => { return ( <li className="level-3"> <a href={href}>{name}</a> </li> );};const CategoryLevel2 = ({ name, href, category = [] }) => { return ( <li> <ul className="level-2"> <h4> <a href={href}>{name}</a> </h4> {category.map(({ name, href }) => ( <CategoryLevel3 href={href} name={name} key={name} /> ))} </ul> </li> );};const CategoryLevel1 = ({ name, href, category = [] }) => { return ( <ol className="level-1" key={name}> <h4> <a href={href}>{name}</a> </h4> {category.map(({ name, href, category = [] }) => ( <CategoryLevel2 name={name} href={href} category={category} key={name} /> ))} </ol> );};const Categories = ({ categories = [] }) => { return ( <Fragment> {categories.map(({ name, href, category }) => ( <CategoryLevel1 category={category} /> ))} </Fragment> );}; -
万千封印
我用这种方法做到了。{categories.map(({ name, href, category }) => { return ( <ol className="level-1"> <h4><a href={href}>{name}</a></h4> {category && category.map(({ name: nameL2, href: hrefL2, category: categoriesL2 }) => { return ( <li> <ul className="level-2"> <h4><a href={hrefL2} >{nameL2}</a></h4> {categoriesL3 && categoriesL3.map(({ name: nameL3, href: hrefL3 }) => { return ( <li className="level-3"> <a href={hrefL3}>{nameL3}</a> </li> ) ); })} </ul> </li> ) })} </ol> ); })}
随时随地看视频慕课网APP
相关分类
JavaScript