重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Tree组件如何在React中使用

今天就跟大家聊聊有关Tree组件如何在React中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业资兴免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

数据结构:

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',
     }
    ]
   }
 ]
}

引用代码:

   

组件实现代码:

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 (
             {item.title}
          )
    }else{
      return (
         {item.title}
      )
    }
  }

  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(
      
            {/* 第一个层级 */}                               {this.itemTitle(itemGroup)}                  {/* 调用tree方法 */}         {this.tree(itemGroup.child)}       
    )     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 (           
                                              {this.itemTitle(item)}                          {/* 如果当前子元素还有子元素,就递归使用tree方法,把当前子元素的子元素渲染出来 */}             {this.tree(item.child)}           
        )       })     }     return treeItem   }   render() {     return (                { this.treeItemCroup(this.props.treeList) }       
    );   } } export default Tree;

效果图:

Tree组件如何在React中使用

DOM结构图

Tree组件如何在React中使用

Tree组件如何在React中使用

看完上述内容,你们对Tree组件如何在React中使用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


本文标题:Tree组件如何在React中使用
本文来源:http://cqcxhl.cn/article/iiiesh.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP