javascript - 各级组件的递归渲染

Question

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

请在这里找到一个 fiddle : 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>      
    )
  }

在你的 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>
    )
  }

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