摘要：實(shí)踐之組件實(shí)現(xiàn)功能渲染數(shù)據(jù)展開(kāi)合并使用數(shù)據(jù)結(jié)構(gòu)引用代碼組件實(shí)現(xiàn)代碼這是點(diǎn)擊時(shí)調(diào)用的方法如果當(dāng)前這個(gè)沒(méi)有旋轉(zhuǎn)，那就設(shè)置旋轉(zhuǎn)，視覺(jué)效果點(diǎn)擊的時(shí)候設(shè)置當(dāng)前

實(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",
          }
        ]
      }
  ]
}

引用代碼：

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

    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(
            

                {/* 第一個(gè)層級(jí) */}
                

                    
                    {this.itemTitle(itemGroup)}
                
                {/* 調(diào)用tree方法 */}
                {this.tree(itemGroup.child)}
            
        )
        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  (
                    

                        

                           
                            {this.itemTitle(item)}
                        
                        {/* 如果當(dāng)前子元素還有子元素，就遞歸使用tree方法，把當(dāng)前子元素的子元素渲染出來(lái) */}
                        {this.tree(item.child)}
                    
                )
            })
        }
        return treeItem
    }

    render() {
        return (
            

                { this.treeItemCroup(this.props.treeList) }
            
        );
    }
}

export default Tree;

效果圖：

DOM結(jié)構(gòu)圖

代碼我加了一些注釋，可能還是比較難理清楚邏輯 ?
當(dāng)前的邏輯我覺(jué)得有點(diǎn)混亂，希望看的朋友們能給出一點(diǎn)建議，感激不盡