React Tree view with checkbox option

Question

Как создать древовидную структуру с опцией checkbox в react js. checkbox должно быть расположено в правой части дерева.

Ниже json образец для создания treeiew:

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

Используйте эту рекурсивную функцию для достижения этой цели:

_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' 
 
          } 
 
         ] 
 
        }, 
 
        { 
 
         \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>