[英]What is most performant way to iterate nested javascript objects and render inside jsx
I would like to render this nested JS object inside React component into ol > li > ol > li format, and nested objects should be indented as per level.我想将 React 组件中的这个嵌套 JS 对象呈现为 ol > li > ol > li 格式,并且嵌套对象应按级别缩进。
JSON Sample data : https://jsfiddle.net/39o8nrpk/ JSON 示例数据: https : //jsfiddle.net/39o8nrpk/
It will be great help if I can get the solution to render this data in a performant way using JavaScript.如果我能得到使用 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"
}
]
}
]
}
]
}
}
I did it using this approach.我是用这种方法做到的。
{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>
);
})}
It would be better if you split your code in different components, each one at charge of rendering an specific categories level.如果您将代码拆分为不同的组件会更好,每个组件负责呈现特定的类别级别。 Once you have this scenario, maybe you should try to achieve it using recursion , which in my opinion would be the best solution.
一旦你有了这个场景,也许你应该尝试使用 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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.