带有复选框选项的react树视图

IT技术 reactjs
2021-04-30 04:52:59

如何创建与树视图checkbox中选择react js。checkbox应该放在树的右侧。

以下是json创建树状视图的示例：

var json = [
      { 
        "text": "Parent 1",
        "nodes": [
         { 
            "text": "Child 1",
            "nodes": [
              { 
                "text": "Grandchild 1"
              },
              {
                "text": "Grandchild 2"
              }
            ]
          },
          {
           "text": "Child 2"
          } 
        ]
      },
      {
       "text": "Parent 2"
      },
      {
       "text": "Parent 3"
      },
      {
       "text": "Parent 4"
      },
      {
        "text": "Parent 5"
      }
    ];
1个回答

使用这个递归函数来实现：

_createList(item, margin){
      return item.map((el,i)=>{
          return <div key={i} style={{marginLeft: margin}}>
                   {el.text}
                   <input type='checkbox'/>
                   {el.nodes && el.nodes.length ? this._createList(el.nodes, 10) : null}
                 </div>
      })
  }

  render() {
    return (
      <div >
            {this._createList(json, 0)}
      </div>
    )
  }

检查工作fiddle：https : //jsfiddle.net/mayankshukla5031/rm49r11a/

var json = [
      { 
        "text": "Parent 1",
        "nodes": [
         { 
            "text": "Child 1",
            "nodes": [
              { 
                "text": "Grandchild 1",
                 "nodes": [
                     {
                        'text': 'G GrandChild1.1',
                        'nodes': [
                           {
                              'text': 'G G GrandChild1.1.1'
                           }
                        ]
                     },
                     {
                      	text: 'G GrandChild1.2'
                     }
                 ]
              },
              {
                "text": "Grandchild 2"
              }
            ]
          },
          {
           "text": "Child 2"
          } 
        ]
      },
      {
       "text": "Parent 2"
      },
      {
       "text": "Parent 3"
      },
      {
       "text": "Parent 4"
      },
      {
        "text": "Parent 5"
      }
    ];
class App extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  
  _createList(item, margin){
      return item.map((el,i)=>{
          return <div key={i} style={{marginLeft: margin}}>
                   {el.text}
                   <input defaultChecked type='checkbox'/>
                   {el.nodes && el.nodes.length ? this._createList(el.nodes, 10) : null}
                 </div>
      })
  }
  
  render() {
    return (
      <div >
        	{this._createList(json, 0)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container" ></div>

其它你可能感兴趣的问题
上一篇React-Table 在选择时重新渲染整个表 下一篇react-router-bootstrap 链接容器