react插件，树状图（可⾃由定义⼦节点结构，⼤⼩，样式）react插件，树状图(可⾃由定义⼦节点结构，⼤⼩，样式)
先上效果图
效果图
效果图
安装
安装 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.d ata)
return<div onClick={()=>{ props.click(props.path, props.data)}}>
{props.data.agntname}// 或者随便写什么 {props.data.name} 或者直接写123，都⾏
</div>
json值的类型有哪些}
// 每⼀个⼦节点的结构和样式(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, pro ps.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"},{"agntnam e":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntna
me":"侯某某","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":"杜某某","a gtype":"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":"陆某某","agtyp
e":"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":"贾某某","agt ype":"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":"陆某某","a gtype":"HD"},{"agntname":"郑钰","agtype":"SD"},{"agntname":"周珊珊","agtype":"SE"},{"agntname":"周睿","agtype":"TA"}]},{"agntname":"贾某某","agtype":"A S","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"}]}]}]}]}]}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论