在所有级别递归呈现组件

Question

我需要帮助来递归地呈现所有级别的组件。 顶层有节点，然后遵循相同的结构直到最后。 如果我们获得特权，我们会以不同的方式呈现它，但是所有类别都需要显示在上面。

请在这里找到一个小提琴： https://jsfiddle.net/vedvrat13/dq0u2pm7/

预期输出：

--Category 1
----SubCategory 1
------Privilege 11
--Category 2
----SubCategory 2
------Privilege 21
------Privilege 22

请帮我同样的忙。 我尝试了多种方法，但是我也陷入了如何渲染和调用函数的困境。

Answer 1

这可能有助于您形成您所期望的结构。您需要形成树结构来实现它，并在此处找到工作模块 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>      
)
}

在树组件内部

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>
)
}

如果您需要更多信息，请告诉我。谢谢

Answer 2

已修复：

renderRecursive(level, nodes){
return nodes.map(node => {
return (
<div>
<div>{node.label}</div>
{(node.type === 'CATEGORY' && node.nodes) && this.renderRecursive(level++, node.nodes)}
</div>)
});
};

Answer 3

好的，这是一个有趣的小问题，但你的问题是你实际上并没有以正确的方式看待它，因此没有正确构建你的标记结构: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>

打字很烦人的男孩...无论如何，所以一旦你看到这个

你可以看到：

1. 父div
2. 每个孩子都被包裹在一个div中，并有标签和(可能(一个孩子。

所以现在我们构建：

。或不是因为你回答了 XD