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

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

ant框架里，tree结构的剖析
1.tree结构，当加载treeChildren（树形下级分支）时，底层代码在上级结构tree（主干）中生成children属性，并把下级分支push到children属性里

// 实例
主干：[{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,
    })
  }

2.tree结构底层使用了递归模式，用来遍历和操作树形结构的所有下级数据

// 具体代码实例
renderTreeNodes = (data) => {
    console.log(data)
    if (data[0] !== null) {
      return data.map((item) => {
        if (item.children) {
          return (
            
                  :
                  null
              }
            >
              {/** 此处使用了递归方法，自己调用自己，实现循环查找下级treeChildren，直到再也没有children属性为止 */}
              {this.renderTreeNodes(item.children)}
            
          )
        }
        return (
          
                :
                null
            }
          />
        )
      })
    }
  }

// 然后渲染出来前端样式
{/* 组织架构树形结构 */}
                
                  {this.renderTreeNodes(this.state.organizationTreeData)}