如何用react封装一款Tree 树形组件 |
您所在的位置：网站首页 › react树形结构表格 › 如何用react封装一款Tree 树形组件 |
如何用react封装一款Tree 树形组件
|
这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战 TIP 👉 呜呼！楚虽三户能亡秦，岂有堂堂中国空无人！____陆游《金错刀行》 实现Tree.js import React from 'react'; import './Tree.scss'; /** * Tree 组件所传属性描述 * treeList 树的所有数据 arr * onClick 点击树的执行方法 函数 * loadDataAction 动态加载数据 函数 */ class Tree extends React.Component { constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); this.state = { node: props.treeList, } } handleClick(e,item) { let Oi = e.target.parentNode.childNodes[0] ; // Oi.style.transform = Oi.style.transform == "rotate(-90deg)" ? "rotate(0deg)" : "rotate(-90deg)"; this.digui(this.state.node,item); this.props.onClick && this.props.onClick(item); this.props.loadDataAction && this.props.loadDataAction(item); } checkAction(item){ item.checked = !item.checked; this.setState({ node : this.state.node }); // console.log(item); } digui(node,item){ let newNode = node; for(let i=0; i{item.title} ) } } tree(child){ let treeItem; // 如果有子元素 if(child){ // 子元素是数组的形式，把所有的子元素循环出来 treeItem = child.map((item, key) => { // 同理，设置样式 let itemStyle = { paddingLeft: 20*parseInt(item.level.slice(5)-1)+'px', position:'relative' }; let wrapperStyle = { left: 5*parseInt(item.level.slice(5)-1)+'px', }; // 同理，设置➡️ let iconChevron; if(item.child){ if(item.open){ iconChevron = 'icon icon-xiangxiazuocedaohang'; }else{ iconChevron = 'icon icon-xiangyouzuocedaohang'; } }else{ iconChevron = 'icon tree-icon'; } return ( { this.props.loadDataAction ? ( (!(item.child && item.child.length)) ? {this.handleClick(e,item)}}> : ( this.props.notice ? : {this.handleClick(e,item)}}> ) ): {this.handleClick(e,item)}}> } { this.props.type == 'check' && } {this.itemTitle(item)} {/* 如果当前子元素还有子元素，就递归使用tree方法，把当前子元素的子元素渲染出来 */} {item.open && this.tree(item.child)} ) }) } return treeItem; } render() { return ( {/*{this.tree(this.state.node)}*/} {this.tree(this.props.treeList)} ); } } export default Tree;样式这块就先不放了 「欢迎在评论区讨论」 希望看完的朋友可以给个赞，鼓励一下 |
【本文地址】