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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
js实现右键菜单功能
Nov 28 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
angular指令笔记ng-options的使用方法
Sep 18 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动态生成JavaScript代码
2009/03/09 PHP
PHP 柱状图实现代码
2009/12/04 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python网络编程详解
2017/10/31 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
语文教学随笔感言
2014/02/18 职场文书
离职保密承诺书
2014/05/28 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
windows系统搭建WEB服务器详细教程
2022/08/05 Servers