React實(shí)踐之Tree組件的使用方法

更新時(shí)間：2017年09月30日 14:40:12 作者：oylp

本篇文章主要介紹了React實(shí)踐之Tree組件的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了React實(shí)踐之Tree組件，分享給大家，具體如下：

實(shí)現(xiàn)功能

渲染數(shù)據(jù)
展開(kāi)合并

使用

數(shù)據(jù)結(jié)構(gòu)：

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>

組件實(shí)現(xiàn)代碼：

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) {
    // 這是點(diǎn)擊➡️ 時(shí)調(diào)用的方法
    // 如果當(dāng)前這個(gè)➡️ 沒(méi)有旋轉(zhuǎn)，那就設(shè)置旋轉(zhuǎn)，視覺(jué)效果
    e.target.style.transform = e.target.style.transform == "rotate(-90deg)" ? "rotate(0deg)" : "rotate(-90deg)"
    for(let item in e.target.parentNode.parentNode.childNodes){
      // 點(diǎn)擊的時(shí)候設(shè)置當(dāng)前層級(jí)的子元素素隱藏
      // 操作了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){
    // 這個(gè)是返回title，因?yàn)橛袝r(shí)候是點(diǎn)擊一個(gè)鏈接，所以設(shè)置了兩種情況，如果node節(jié)點(diǎn)里面有component這個(gè)節(jié)點(diǎn)，那就設(shè)置成可以點(diǎn)擊跳轉(zhuǎn)
    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 = []
    // 每個(gè)元素的樣式，根據(jù)當(dāng)前等級(jí)來(lái)設(shè)置樣式，level1的就縮緊20px,level2的縮緊40px，一次類(lèi)推，在視覺(jué)上呈現(xiàn)樹(shù)的形式
    let itemStyle = {
        paddingLeft: 20*parseInt(itemGroup.level.slice(5), 10)+'px'
      }
    // 如果當(dāng)前節(jié)點(diǎn)還有子元素，就設(shè)置一個(gè)➡️ 箭頭 ，可以點(diǎn)擊展開(kāi)。
    let iconChevron = classNames('fa',{'fa-chevron-down' : itemGroup.child})
    // 把所有節(jié)點(diǎn)放在一個(gè)數(shù)組里面
    itemGroupItem.push(
      <ul>
        {/* 第一個(gè)層級(jí) */}
        <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>
        {/* 調(diào)用tree方法 */}
        {this.tree(itemGroup.child)}
      </ul>
    )
    return itemGroupItem
  }

  tree(child){
    let treeItem
    // 如果有子元素
    if(child){ 
      // 子元素是數(shù)組的形式，把所有的子元素循環(huán)出來(lái)
      treeItem = child.map((item, key) => {
        // 同理，設(shè)置樣式
        let itemStyle = {
          paddingLeft: 20*parseInt(item.level.slice(5), 10)+'px'
        }
        // 同理，設(shè)置➡️ 
        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>
            {/* 如果當(dāng)前子元素還有子元素，就遞歸使用tree方法，把當(dāng)前子元素的子元素渲染出來(lái) */}
            {this.tree(item.child)}
          </ul>
        )
      })
    }
    return treeItem
  }

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

export default Tree;

效果圖：