javascript - 在 react js 中渲染具有 n 个级别的目录结构数据

Question

我有一个目录结构的样本数据集如下

http://www.jsoneditoronline.org/?id=f9ce34de42f1a395e172f81c0c850da1

与目录类似，级别可以是 n 个数字。

在反应中，我想使用带有 onClick 事件的数据创建一个目录结构。例如在第一页上应该显示根目录子目录，当我点击第一个孩子时，应该显示第一个孩子的孩子。

这就是我想要的，最初只有 3 个文件夹在根级别可见。

当我在 1 级单击 child2 时，其他两个孩子可见，

当再次点击孩子 2 时，它的 2 个孩子是可见的。现在，如果我单击任何其他目录，它的子目录应该是可见的。

你能建议我用redux在reactJs中实现它的正确方法吗？谢谢

Answer 1

您可以创建一个Directory组件，该组件将通过 props 将其子组件传递给新Directory组件来递归渲染。我在这里创建了一个JS fiddle来演示，代码如下。这个例子没有使用 redux，但是你仍然可以应用这种方法。

var DirectoryRoot = React.createClass({
  getInitialState: function(){
    var sample_dir = {
          "id": 1,
          "name": "P1",
          "children": [{
            "id": 2,
            "name": "C1_P1",
            "children": [{
              "id": 3,
              "name": "C1_C1_P1"
            }, {
              "id": 4,
              "name": "C2_C1_P1",
              "children": [{
                "id": 5,
                "name": "C1_C2_C1_P1"
              }, {
                "id": 9,
                "name": "C2_C2_C1_P1"
              }]
            }]
          }, {
            "id": 6,
            "name": "C2_P1"
          }, {
            "id": 7,
            "name": "C3_P1",
            "children": [{
              "id": 8,
              "name": "C1_C3_P1",
              "children": [{
                "id": 10,
                "name": "C1_C1_C3_P1",
                "children": [{
                  "name": "C1_C1_C1_C3_P1"
                }]
              }]
            }]
          }]
        }
    return {dirs: sample_dir, clicked: false};
  },
  handleClick: function(){
    this.setState({clicked: !this.state.clicked});
  },
  render: function() {
    var sub_dirs = this.state.dirs.children.map(function(dir){
      return <Directory dirs={dir}/>
    }.bind(this));
    console.log(this.state.dirs)
    return (<div onClick={this.handleClick}> 
      <div>Root {this.state.dirs.name} </div>
      {this.state.clicked ?
        <div style={{marginLeft:10}}> {sub_dirs} </div> : null
      }

    </div>) 
    //return <div> {this.recursiveDirRender(this.state.dirs)}</div>;
  }
});

var Directory = React.createClass({
  getInitialState: function(){
    return {clicked: false}
  },
  handleClick: function(event){
    event.stopPropagation();
    this.setState({clicked: !this.state.clicked})
  },
  render: function(){
    console.log(this.props.dirs)
    var sub_dirs = this.props.dirs.children ?this.props.dirs.children.map(function(dir){
      return (<div key={dir.key}>
          <Directory dirs={dir}/> 
      </div>)
    }.bind(this)) : null;


    return (
      <div onClick={this.handleClick}>
        {this.props.dirs.name}
        <div style={{marginLeft: 20, display: (this.state.clicked ? null: "none")}}> {sub_dirs} </div>
      </div>
    )
  }
});

ReactDOM.render(
  <DirectoryRoot/>,
  document.getElementById('container')
);