react插件，树状图(可自由定义子节点结构，大小，样式)

如果觉得看下面的代码和说明还没明白，可以直接去github仓库拉代码,源码和说明里面都有(https://github.com/jiangji1/react_tree_j)

先上效果图

效果图

image

效果图

image

安装

安装 npm install react_tree_j

引入，使用

import React from 'react';
import ReactTree from './react_tree_j';
function childLayout (props) {
  return <div onClick={ () => { props.click(props.path, props.data) } }>
    {props.data.agntname} // 或者随便写什么 {props.data.name} 或者直接写123，都行
  </div>
}
class App extends React.Component {
  click = (obj) => {
    console.log(obj)
  }
  render () {
    return <ReactTree data={json数据} showAll={false} click={this.click} childLayout={childLayout} size={1} />
  }
}

/* 说明(description)
  必传   1.data是一个json数据
  必传   2.childLayout是react的函数组件,返回的dom元素是每个子节点,大小决定树状图的大小, 接受一个对象props(Object类型)
  props.data 是 每个子节点的数据 Object类型
  props.tier 是 第几层级 Number类型
  props.path 是 属于父节点子集的下标
  props.click 是 function,接受2个参数，第1个参数把props.path传入,第2个参数把props.data传入
  childLayout具体参考下面的childLayout函数

  非必传 3.click一个函数，接受一个参数，参数是点击每个子节点数据(是当前点击的节点的所有属性)
  非必传 4.showAll是一个Boolean类型(不是非要布尔类型,js会隐式转换),如果是true,把数据全部显示，如果是false或者不传，就会默认显示数据最左边一列, 只要点击就能切换节点显示
  非必传 5.size是一个Number,如果觉得每一层dom元素拥挤，可以传入数字进行调节每一层的间距
*/

childLayout具体参考这里(先看上面的说明)
// 每一个子节点的结构和样式(最简洁的)
function childLayout (props) {
  // 非常重要！非常重要！非常重要！这里的onClick给dom绑定点击事件,复制黏贴就行了，不能改更，只能写成onClick={() => {props.click(props.path, props.data)
  return <div onClick={ () => { props.click(props.path, props.data) } }>
    {props.data.agntname} // 或者随便写什么 {props.data.name} 或者直接写123，都行
  </div>
}

// 每一个子节点的结构和样式(src中demo的说明)
function childLayout (props) {
  console.log(props)
  // bgcArr是每一层的图标颜色(就是demo的小圆圈的颜色) props.tier就是为了这里每层使用不同颜色，没有其他用处
  let bgcArr = ['#0DC0AF', '#FD71AA', '#41A3FC', '#D086EB', '#F8B551']
  return <div>
    <span>
      // 这里style就是为了设置背景色，不重要
      <div style={{'--background_color': bgcArr[props.tier % bgcArr.length] || '#fff'}}>
        // 非常重要！非常重要！非常重要！这里的onClick给dom绑定点击事件,复制黏贴就行了，不能改更，只能写成onClick={() => {props.click(props.path, props.data)
        <div className='shu_show_name' onClick={() => {
        props.click(props.path, props.data)
      }} style={{backgroundColor: 'var(--background_color)'}}>
        {props.data.agtype}
      </div>
      <div className="shu_show_all_name">
        <div>{props.data.agntname}</div>
      </div>
      </div>
    </span>
  </div>
}

最后附上一个json数据

{"agntname":"agntname","agtype":"agtype","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"崔某某","agtype":"UM","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS"},{"agntname":"贾某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"崔某某","agtype":"SS","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"贾某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"杜某某","agtype":"SS","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"贾某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]}]},{"agntname":"段某某","agtype":"UM","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"贾某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"崔某某","agtype":"SS","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"贾某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]},{"agntname":"杜某某","agtype":"SS","child":[{"agntname":"陆某某","agtype":"HD","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"侯某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"贾某某","agtype":"AS","child":[{"agntname":"陆某某","agtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]}]}]}]}]}