react-开发经验分享-树形结构的解析与运用（一）

// 实例
主干：[{id: '001'}]
// 当生成下级分支时
主干：[{id: '001', children: [{id: '0001'}]}]
分支：[{id: '0001'}]
// 二级分支时
主干：[{id: '001', children: [{id: '0001', children:[{id: '00001'}]}]}]
一级分支：[{id: '0001',  children:[{id: '00001'}]}]
二级分支：[{id: '00001'}]
...

// 具体代码实例：
// 加载treeChildren结构数据
  onLoadData = async (treeNode) => {
    // tree结构数据
    // console.log(treeNode);

    let childrenId = treeNode.props.dataRef.id;
    let childrenData = await initialApi.getOrganization(childrenId);
    let childrenList = childrenData.extension || [];
    treeNode.props.dataRef.children = childrenList;

    // console.log(childrenList);

    this.setState({
      organizationTreeData: [...this.state.organizationTreeData],
      childrenList: childrenList,
    })
  }

// 具体代码实例
renderTreeNodes = (data) => {
    console.log(data)
    if (data[0] !== null) {
      return data.map((item) => {
        if (item.children) {
          return (
            <TreeNode title={item.organizationName} key={item.id} dataRef={item}
              icon={
                this.state.DOMkey === item.id
                  ?
                  <Icon type="dropbox" style={{ color: 'rgb(82, 138, 255)', verticalAlign: 0 }} />
                  :
                  null
              }
            >
              {/** 此处使用了递归方法，自己调用自己，实现循环查找下级treeChildren，直到再也没有children属性为止 */}
              {this.renderTreeNodes(item.children)}
            </TreeNode>
          )
        }
        return (
          <TreeNode {...item} title={item.organizationName} key={item.id} dataRef={item}
            icon={
              this.state.DOMkey === item.id
                ?
                <Icon type="dropbox" style={{ color: 'rgb(82, 138, 255)', verticalAlign: 0 }} />
                :
                null
            }
          />
        )
      })
    }
  }

// 然后渲染出来前端样式
{/* 组织架构树形结构 */}
                <Tree loadData={this.onLoadData} onSelect={this.onSelect} showLine showIcon onRightClick={this.onRightClick}
                  onExpand={this.onExpand} draggable onDrop={this.onDrop}
                >
                  {this.renderTreeNodes(this.state.organizationTreeData)}
                </Tree>