我需要帮助以递归方式渲染各个级别的组件。顶层有节点，然后一直遵循相同的结构。如果我们获得 Privilege，我们会以不同的方式呈现它，但是所有类别都需要显示在上面。
请在这里找到一个小提琴： https ://jsfiddle.net/vedvrat13/dq0u2pm7/
预期输出：
--Category 1
----SubCategory 1
------Privilege 11
--Category 2
----SubCategory 2
------Privilege 21
------Privilege 22
请帮助我。我尝试了多种方法，但是对于如何渲染和调用该函数我也陷入了困境。
这可能会帮助您形成您所期望的结构。您需要形成树结构来实现它并在这里找到工作modulehttps://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>
)
}
如果您需要更多信息，请告诉我。谢谢
固定的：
renderRecursive(level, nodes){
return nodes.map(node => {
return (
<div>
<div>{node.label}</div>
{(node.type === 'CATEGORY' && node.nodes) && this.renderRecursive(level++, node.nodes)}
</div>)
});
};
好的，这是一个有趣的小家伙，但是您的问题是您实际上并没有以正确的方式看待它，因此没有正确构建标记结构：P
从你的小提琴的外观来看，你的最终结果实际上是这样的：
<div>
<div>
Category 1
<div>
Subcategory 1
<div>
Privilege 11
</div>
</div>
</div>
<div>
Category 2
<div>
Subcategory 2
<div>
Privilege 21
</div>
<div>
Privilege 22
</div>
</div>
</div>
</div>
男孩打字很烦人......无论如何，一旦你看到这个，你就会看到：
所以现在我们构建：
...或者不是因为你回答了它 XD