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

Question

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

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

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

在 React 中，我想使用此数据和 onClick 事件创建一个目录结构。例如在第一页上应该显示根目录 children，当我点击第一个 child 时，应该显示第一个 child 的 children。

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

当我在第 1 层点击 child2 时，其他两个 children 可见，

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

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

Answer 1

您可以创建一个 Directory 组件，该组件将通过 props 将其子项传递给新的 Directory 组件来递归呈现。我创建了一个 JS fiddle here 来演示，代码如下。这个例子没有使用 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')
);

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

Render directory structure data with n numbers of levels in react js

javascript

reactjs

redux

react-redux