Reactjs 使用复选框选项反应树视图

如何使用

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

---

使用此递归函数可实现以下目的：

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

感谢您的快速回复。如何在树视图左侧添加展开和折叠图标。单击父图标后，我必须展开树状视图。是的，工作正常。如何在树视图左侧添加展开和折叠图标。单击父图标后，我必须展开树视图。我在json中使用的是checked:true，但在UI默认的check选项中它不起作用。您可以共享示例代码或fiddle链接（带有树视图的展开和浏览图标），这是我的基本要求检查更新的fiddle链接，我想这就是您在展开/折叠中想要的：）现在您的问题完全解决了：）