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

本文介绍了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;

效果图：

dom结构图

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。