react树状组件

最近在react项目中需要一个树状组件，但是又不想因为这个去引入一套UI组件，故自己封装了一个基于react的树状组件，

个人认为比较难得部分在于数据的处理，话不多说直接上代码：

下面是tree.js

import React, {Component} from 'react';
import './tree.css';
import Stack from '../utils/util';class Tree extends Component {constructor(props) {super(props)this.state = {treeData: {},treeArray: [],treeObj: {},type: 'tree',parentId: 'pid',id: 'id',value: 'value',label: 'label',children: 'children',checkBox: false}this.checkMap = {2: 'checked',1: 'partChecked',0: ''}}componentWillMount() {if (this.props.config.type.toLowerCase() === 'tree') {this.setState({treeData: this.props.treeData,...this.props.config})} else {this.setState({treeArray: this.props.treeData,...this.props.config})}}componentDidMount() {if (this.state.type.toLowerCase() !== 'tree') {this.factoryArrayData()} else {this.factoryTreeData()}}componentDidUpdate() {}componentWillUnmount() {}factoryArrayData() {let data = this.state.treeArray, obj = {}, rootId = null;data.map((v, i) => {if (v[this.state.parentId] || v[this.state.parentId] === 0) {if (obj[v[this.state.parentId]]) {if (obj[v[this.state.parentId]].children) {obj[v[this.state.parentId]].children.push(v)} else {obj[v[this.state.parentId]].children = [v]}} else {obj[v[this.state.parentId]] = {children: [v]}}} else {rootId = v[this.state.id]}if (obj[v[this.state.id]]) {v.children = obj[v[this.state.id]].children}obj[v[this.state.id]] = v})this.setState({treeData: obj[rootId],treeObj: obj})}factoryTreeData() {let data = this.state.treeDatalet stack = new Stack();let obj = {};stack.push(data);while (stack.top) {let node = stack.pop();for (let i in node.children) {stack.push(node.children[i])}obj[node[this.state.id]] = node}this.setState({treeObj: obj})}openNode (e, data) {if (e.stopPropagation) {e.stopPropagation();} else {window.event.cancelBubble = true;}data.open = !data.openthis.forceUpdate()}selectNode (e, data) {if (e.stopPropagation) {e.stopPropagation();} else {window.event.cancelBubble = true;}this.setState({selectVal: data[this.state.value]}, () => {if (this.props.nodeClick) {this.props.nodeClick(data[this.state.value])}})}selectCheckBox (e, data) {if (e.stopPropagation) {e.stopPropagation();} else {window.event.cancelBubble = true;}let check = data.checkedif (data.children && data.children.length) {let stack = new Stack();stack.push(data);while(stack.top) {let node = stack.pop()for (let i in node.children) {stack.push(node.children[i])}if (check === 2) {node.checked = 0;} else {node.checked = 2}}} else {if (check === 2) {data.checked = 0;} else {data.checked = 2}}if (data[this.state.parentId] || data[this.state.parentId] === 0) {this.updateParentNode(data)} else {this.forceUpdate()if (this.props.selectChange) {this.getCheckedItems()}}}updateParentNode (data) {let par = this.state.treeObj[data[this.state.parentId]], checkLen = 0, partChecked = false;for (let i in par.children) {if (par.children[i].checked === 2) {checkLen++;} else if (par.children[i].checked === 1) {partChecked = true;break;}}if (checkLen === par.children.length) {par.checked = 2} else if (partChecked || (checkLen < par.children.length && checkLen > 0)) {par.checked = 1;} else {par.checked = 0;}if (this.state.treeObj[par[this.state.parentId]] || this.state.treeObj[par[this.state.parentId]] == 0) {this.updateParentNode(par)} else {this.forceUpdate()if (this.props.selectChange) {this.getCheckedItems()}}}getCheckedItems() {let stack = new Stack ();let checkedArr = [];stack.push(this.state.treeData);while (stack.top) {let node = stack.pop();for (let i in node.children) {stack.push(node.children[i])}if (node.checked === 2) {checkedArr.push(node[this.state.value])}}this.props.selectChange(checkedArr)}renderTreeParent() {let data = this.state.treeDatareturn (<div className={`parentNode childNode ${data.open?'open':'close'} ${data.children && data.children.length?'':'noChildren'}`}><span onClick={(e) => this.openNode(e, data)} className="openNode"></span>
        {this.state.checkBox?<div className={`checkBox ${this.checkMap[data.checked]}`} onClick={(e) => this.selectCheckBox(e, data)}></div>:<div className="fileBox"><img src="./images/file-icon.png" alt=""/></div>
        }<div className={`nodeName ${this.state.selectVal === data[this.state.value]?'active':''}`} onClick={(e) => this.selectNode(e, data)}>{data[this.state.label]}</div>
        {this.state.treeData.children ?<div className="childList">{this.renderTreeNode(data)}</div> : null
        }</div>
    )}renderTreeNode(data) {return data.children.map((val, ind) => {return (<div key={ind} className={`childNode ${val.open?'open':'close'} ${val.children && val.children.length?'':'noChildren'}`}><span onClick={(e) => this.openNode(e, val)} className="openNode"></span>
          {this.state.checkBox?<div className={`checkBox ${this.checkMap[val.checked]}`} onClick={(e) => this.selectCheckBox(e, val)}></div>:<div className="fileBox"><img src="./images/file-icon.png" alt=""/></div>
          }{ind === data.children.length - 1?<span className="lastNode"></span>:null
          }<div className={`nodeName ${this.state.selectVal === val[this.state.value]?'active':''}`} onClick={(e) => this.selectNode(e, val)}>{val[this.state.label]}</div>
          {val.children ?<div className="childList">{this.renderTreeNode(val)}</div> : null
          }</div>
      )})}render() {return (<div className="tree">{this.renderTreeParent()}</div>
    )}
}export default Tree

下面是tree.css

.tree {text-align: left;
}
.tree .childNode {padding-left: 20px;position: relative;background-color: #ffffff;z-index: 1;
}
.tree .childNode .checkBox {position: absolute;width: 16px;left: 20px;top: 0;z-index: 2;margin: 7px 10px 0;height: 16px;box-sizing: border-box;border: 1px solid #d2d2d2;vertical-align: text-bottom;font-size: 0;border-radius: 2px;cursor: pointer;
}
.tree .childNode .checkBox:hover {cursor: pointer;border-color: #5bb976;
}
.tree .childNode .checkBox.checked {border: 0;background: url(../images/icon-check-green.png) no-repeat center center;background-size: 100% 100%;background: none\9;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/icon-check-green.png', sizingMethod='scale') \9;
}
.tree .childNode .checkBox.partChecked {border: 0;background: url(../images/part-checked.png) no-repeat center center;background-size: 100% 100%;background: none\9;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/part-checked.png', sizingMethod='scale') \9;
}
.tree .childNode .nodeName {padding-left: 36px;font-size: 14px;color: #333333;white-space: nowrap;overflow: hidden;line-height: 30px;height: 30px;text-overflow: ellipsis;position: relative;z-index: 1;display: inline-block;padding-right: 10px;
}
.tree .childNode .nodeName.active {background-color: #DEF1FF;
}
.tree .childNode .nodeName:hover {text-decoration: underline;cursor: pointer;
}
.tree .childNode.open .openNode {background: url(../images/department-close.png) no-repeat center center;background-size: 100% 100%;background: none\9;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/department-close.png', sizingMethod='scale') \9;
}
.tree .childNode.open .childList {display: block;
}
.tree .childNode.close .openNode {background: url(../images/depart-open.png) no-repeat center center;background-size: 100% 100%;background: none\9;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/depart-open.png', sizingMethod='scale') \9;
}
.tree .childNode.close .childList {display: none;
}
.tree .childNode .fileBox {position: absolute;width: 16px;left: 20px;top: 0;margin: 5px 10px 0;z-index: 2;
}
.tree .childNode .fileBox:hover {cursor: pointer;
}
.tree .childNode .fileBox img {width: 16px;
}
.tree .childNode:before {position: absolute;left: -13px;top: 15px;width: 20px;height: 100%;border-top: 1px solid #CFCFCF;border-right: 1px solid #CFCFCF;content: '';z-index: 1;
}
.tree .childNode:after {position: absolute;bottom: -12px;left: 7px;width: 1px;height: 30px;z-index: 3;background-color: #ffffff;content: '';
}
.tree .childNode.parentNode:before {border-top: none;
}
.tree .childNode .openNode {position: absolute;z-index: 5;left: 0;top: 8px;width: 14px;height: 14px;
}
.tree .childNode .openNode:hover {cursor: pointer;
}
.tree .childNode.noChildren .openNode {width: 10px;height: 10px;top: 10px;left: 7px;background: url(../images/no-child.png) no-repeat center center;background-size: 100% 100%;background: none\9;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/no-child.png', sizingMethod='scale') \9;
}
.tree .childNode.noChildren .openNode:hover {cursor: default;
}
.tree .childNode .lastNode {position: absolute;bottom: -15px;left: -13px;width: 1px;height: 100%;z-index: 4;background-color: #ffffff;
}