Reagieren Baumansicht mit Option Option

Question

Erstellen von Treeview mit checkbox Option in react js. checkbox sollte in der rechten Seite des Baumes platziert werden.

Unten ist die json Probe eine treeiew zu erstellen:

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" 
     } 
    ]; 

Answer 1

verwenden rekursive Funktion, dies zu erreichen:

_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> 
    ) 
    } 

Überprüfen Sie die Arbeits 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' 
 
          } 
 
         ] 
 
        }, 
 
        { 
 
         \t 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 > 
 
     \t {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>