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 相关文章推荐
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
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 解决session死锁的方法
2013/06/20 PHP
php去除HTML标签实例
2013/11/06 PHP
实例讲解php数据访问
2016/05/09 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
JS作用域深度解析
2016/12/29 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
Vue使用NPM方式搭建项目
2018/10/25 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
微信跳一跳辅助python代码实现
2018/01/05 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python中map的基本用法示例
2018/09/10 Python
python openpyxl使用方法详解
2019/07/18 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
大学感恩节活动策划方案
2014/10/11 职场文书
收费员岗位职责
2015/02/14 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2015年市场营销工作总结
2015/07/23 职场文书