前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-开发经验分享-树形结构的解析与运用(一)

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

作者头像
Mr. 柳上原
发布2018-12-28 16:12:30
1.5K0
发布2018-12-28 16:12:30
举报
文章被收录于专栏:菜鸟前端工程师

Author:Mr.柳上原

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

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

代码语言:javascript
复制
// 实例
主干:[{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结构底层使用了递归模式,用来遍历和操作树形结构的所有下级数据

代码语言:javascript
复制
// 具体代码实例
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
            }
          />
        )
      })
    }
  }
代码语言:javascript
复制
// 然后渲染出来前端样式
{/* 组织架构树形结构 */}
                <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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档