javascript - 各级组件的递归渲染
问题描述
我需要帮助以递归方式渲染各个级别的组件。顶层有节点,然后一直遵循相同的结构。如果我们获得 Privilege,我们会以不同的方式呈现它,但是所有类别都需要显示在上面。
请在这里找到一个小提琴: https ://jsfiddle.net/vedvrat13/dq0u2pm7/
预期输出:
--Category 1
----SubCategory 1
------Privilege 11
--Category 2
----SubCategory 2
------Privilege 21
------Privilege 22
请帮助我。我尝试了多种方法,但是对于如何渲染和调用该函数我也陷入了困境。
解决方案
这可能会帮助您形成您所期望的结构。您需要形成树结构来实现它并在这里找到工作模块https://stackblitz.com/edit/react-65krxc?file=TreeComponent.js
renderRecursiveNodes(nodes){
return nodes.map(node => {
return (
<div>
<TreeComponent node={node} />
</div>)
});
};
render() {
return (
<div>
{this.renderRecursiveNodes(this.state.items)}
</div>
)
}
在你的 TreeComponent 里面
render() {
let childNodes;
if (this.props.node.nodes && this.props.node.nodes.length > 0) {
console.log('test');
childNodes = this.props.node.nodes.map(function(node, index) {
return <li key={index}><TreeComponent node={node} /></li>
});
}
return (
<div>
<h5>
{this.props.node.label}
</h5>
<ul >
{childNodes}
</ul>
</div>
)
}
如果您需要更多信息,请告诉我。谢谢