Question

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

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

预期输出：

--Category 1
----SubCategory 1
------Privilege 11

--Category 2
----SubCategory 2
------Privilege 21
------Privilege 22

请帮助我。我尝试了多种方法，但是我也对如何渲染和调用函数感到困惑。

Answer 1

已修复：

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 2

这可以帮助您形成期望的结构。您需要形成树结构来实现它，并在https://stackblitz.com/edit/react-65krxc?file=TreeComponent.js

中找到工作模块

node --max_old_space_size=102400 node_modules/@angular/cli/bin/ng build --prod

在TreeComponent内部

renderRecursiveNodes(nodes){
    return nodes.map(node => {
            return (
            <div>
              <TreeComponent node={node} />
          </div>)
    });
};

  render() {
    return (
      <div>
          {this.renderRecursiveNodes(this.state.items)}      
      </div>      
    )
  }

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

Answer 3

好的，这是一个有趣的小例子，但是您的问题是您实际上并未以正确的方式看待它，结果是没有正确构建标记结构：P

通过小提琴的外观，最终结果实际上是这样的：

 <Route render={({ location }) => {
     return location.pathname.indexOf('/login') === -1 ? TopMenuComponent : null 
  }} />

打扰的男孩...无论如何，所以一旦您看到它，您就会看到：

父级div
每个孩子都被包裹在div中，并带有标签和（可能）一个孩子。

所以现在我们建立：

...还是不，因为您回答了XD

递归呈现各个级别的组件

3 个答案: