React实践之Tree组件的使用方法


Posted in Javascript onSeptember 30, 2017

本文介绍了React实践之Tree组件,分享给大家,具体如下:

实现功能

  • 渲染数据
  • 展开合并

使用

数据结构:

const node = {
 title: '00000', 
 key: '0' ,
 level:'level1',
 open: true,
 child:[ 
   {
    title: '0-111111', 
    key: '0-0',
    level:'level2',
    open: true,
    child:[ 
      { 
       title: '0-1-1111', 
       key: '0-0-0',
       level:'level3',  
      }, 
      { 
       title: '0-1-2222', 
       key: '0-0-1',
       level:'level3',
       open: true,
       child: [
         { 
         title: '0-1-2-11111', 
         key: '0-0-1-0',
         level:'level4',
         open: true,
         child: [
           { 
           title: '0-1-2-1-111', 
           key: '0-0-1-0-0',
           level:'level5',
          }
         ]
        }
       ]
      },
      { 
       title: '0-1-33333', 
       key: '0-0-4',
       level:'level3',
      }, 
    ]
   },
   {
    title: '0-222222', 
    key: '0-2',
    level:'level2',
    open: false,
    child: [
     {
      title: '0-2-1111', 
      key: '0-2-0',
      level:'level3',
     },
     {
      title: '0-2-22222', 
      key: '0-2-1',
      level:'level3',
     },
     {
      title: '0-2-33333', 
      key: '0-2-2',
      level:'level3',
     }
    ]
   }
 ]
}

引用代码:

<div>
  <Tree 
    treeList = {node}
  /> 
</div>

组件实现代码:

import React, { Component } from 'react';
import classNames from 'classnames';
const history = createHistory();
import {
  BrowserRouter as Router,
  HashRouter,
  Route,
  Link,
  Switch,
  NavLink
 } from 'react-router-dom';

class Tree extends Component {

  constructor(props){
    super(props)
    this.treeItemCroup  = this.treeItemCroup.bind(this);
    this.handleClick   = this.handleClick.bind(this);

    this.state ={
      openList : false
    }
  }

  handleClick(e) {
    // 这是点击➡️ 时调用的方法
    // 如果当前这个➡️ 没有旋转,那就设置旋转,视觉效果
    e.target.style.transform = e.target.style.transform == "rotate(-90deg)" ? "rotate(0deg)" : "rotate(-90deg)"
    for(let item in e.target.parentNode.parentNode.childNodes){
      // 点击的时候设置当前层级的子元素素隐藏
      // 操作了DOM,我很难受
      if(item > 0){
        e.target.parentNode.parentNode.childNodes[item].style.display = e.target.parentNode.parentNode.childNodes[item].style.display === 'none' ? 'block' : 'none' 
      }
    }
  }
  
  itemTitle(item){
    // 这个是返回title,因为有时候是点击一个链接,所以设置了两种情况,如果node节点里面有component这个节点,那就设置成可以点击跳转
    if(item.component){ 
      return (<Link to={ item.component } >
             <span onClick={this.handleClick.bind(this)}>{item.title}</span>
          </Link>)
    }else{
      return (
         <span onClick={this.handleClick.bind(this)}>{item.title}</span>
      )
    }
  }

  treeItemCroup(itemGroup) {
    let itemGroupItem = []
    // 每个元素的样式,根据当前等级来设置样式,level1的就缩紧20px,level2的缩紧40px,一次类推,在视觉上呈现树的形式
    let itemStyle = {
        paddingLeft: 20*parseInt(itemGroup.level.slice(5), 10)+'px'
      }
    // 如果当前节点还有子元素,就设置一个➡️ 箭头 ,可以点击展开。
    let iconChevron = classNames('fa',{'fa-chevron-down' : itemGroup.child})
    // 把所有节点放在一个数组里面
    itemGroupItem.push(
      <ul>
        {/* 第一个层级 */}
        <li className={itemGroup.level} key={itemGroup.key} style={itemStyle}>
          <i aria-hidden="true" className={iconChevron} onClick={this.handleClick.bind(this)}></i>
          {this.itemTitle(itemGroup)}
        </li>
        {/* 调用tree方法 */}
        {this.tree(itemGroup.child)}
      </ul>
    )
    return itemGroupItem
  }

  tree(child){
    let treeItem
    // 如果有子元素
    if(child){ 
      // 子元素是数组的形式,把所有的子元素循环出来
      treeItem = child.map((item, key) => {
        // 同理,设置样式
        let itemStyle = {
          paddingLeft: 20*parseInt(item.level.slice(5), 10)+'px'
        }
        // 同理,设置➡️ 
        let iconChevron = classNames('fa',{'fa-chevron-down' : item.child})
        return (
          <ul>
            <li className={item.level} key={key} style={itemStyle}>
              <i aria-hidden="true" className={iconChevron} onClick={this.handleClick.bind(this)}></i>
              {this.itemTitle(item)}
            </li>
            {/* 如果当前子元素还有子元素,就递归使用tree方法,把当前子元素的子元素渲染出来 */}
            {this.tree(item.child)}
          </ul>
        )
      })
    }
    return treeItem
  }

  render() {
    return (
      <div className="tree">
        { this.treeItemCroup(this.props.treeList) }
      </div>
    );
  }
}

export default Tree;

效果图:

React实践之Tree组件的使用方法

DOM结构图

React实践之Tree组件的使用方法

React实践之Tree组件的使用方法

代码我加了一些注释,可能还是比较难理清楚逻辑 ?

当前的逻辑我觉得有点混乱,希望看的朋友们能给出一点建议,感激不尽

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 #Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 #Javascript
jqgrid实现简单的单行编辑功能
Sep 30 #Javascript
微信小程序富文本渲染引擎的详解
Sep 30 #Javascript
js实现数组和对象的深浅拷贝
Sep 30 #Javascript
node通过express搭建自己的服务器
Sep 30 #Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 #Javascript
You might like
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue跨域解决方法
2017/10/15 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
python保存字符串到文件的方法
2015/07/01 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python探索之创建二叉树
2017/10/25 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python实现二维插值的三维显示
2018/12/17 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Numpy之reshape()使用详解
2019/12/26 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
学校经典推荐信
2013/10/30 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
初中班主任评语
2014/04/24 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
责任心演讲稿
2014/05/14 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL