React react-ui-tree的使用

公司需要做一个IDE，要做IDE当然少不了文件列表了。下面我就来展示一下刚刚研究的一个库。



下面是链接：https://react.rocks/example/react-ui-tree

至于如何导入module，官方文档都写的很清楚我就不再贴出。

这里由于给的介绍太过简单。我就将我的代码贴出：

第一个文件就是我们组件文件：

var cx = require('classnames');
var React = require('react');
var ReactDOM = require('react-dom');
var Tree = require('react-ui-tree');
var tree = require('./tree');
require('react-ui-tree/dist/react-ui-tree.css')
require('./css.css')

var UiTree = React.createClass({
getInitialState() {
return {
active: null,
tree: tree
};
},

renderNode(node) {
return (
<span className={cx('node', {
'is-active': node === this.state.active
})} onClick={this.onClickNode.bind(null, node)}>
{node.module}
</span>
);
},

onClickNode(node) {
this.setState({
active: node
});
},

render() {
return (
<div className="app">
<div className="tree">
<Tree
paddingLeft={20}
tree={this.state.tree}
onChange={this.handleChange}
isNodeCollapsed={this.isNodeCollapsed}
renderNode={this.renderNode}
/>
</div>
<div className="inspector">
<button onClick={this.updateTree}>update tree</button>
<pre>
{JSON.stringify(this.state.tree, null, '  ')}
</pre>
</div>
</div>
);
},

handleChange(tree) {
this.setState({
tree: tree
});
},

updateTree() {
var tree = this.state.tree;
tree.children.push({module: 'test'});
this.setState({
tree: tree
});
}
});

module.exports = UiTree;

下面是数据：

module.exports = {
module: 'react-ui-tree',
children: [{
module: 'dist',
collapsed: true,
children: [{
module: 'node.js',
leaf: true
}, {
module: 'react-ui-tree.css',
leaf: true
}, {
module: 'react-ui-tree.js',
leaf: true
}, {
module: 'tree.js',
leaf: true
}]
}, {
module: 'example',
children: [{
module: 'app.js',
leaf: true
}, {
module: 'app.less',
leaf: true
}, {
module: 'index.html',
leaf: true
}]
}, {
module: 'lib',
children: [{
module: 'node.js',
leaf: true
}, {
module: 'react-ui-tree.js',
leaf: true
}, {
module: 'react-ui-tree.less',
leaf: true
}, {
module: 'tree.js',
leaf: true
}]
}, {
module: '.gitiignore',
leaf: true
}, {
module: 'index.js',
leaf: true
}, {
module: 'LICENSE',
leaf: true
}, {
module: 'Makefile',
leaf: true
}, {
module: 'package.json',
leaf: true
}, {
module: 'README.md',
leaf: true
}, {
module: 'webpack.config.js',
leaf: true
}]
}

这里有个坑，就是当我们将程序运行起来的时候发现样式是不对的，查阅它的源码才知道他是将样式放入了“.less”的文件之中，所以我们需要将文件先转化成css文件，然后添加文件手动导入：

.tree {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
overflow-x: hidden;
overflow-y: auto;
background-color: #21252B;
}
.m-node.placeholder {
border: 1px dashed #1385e5;
}
.m-node .inner {
color: #9DA5B4;
font-size: 12px;
font-family: Menlo;
}
.m-node .node {
display: inline-block;
width: 100%;
padding: 4px 5px;
}
.m-node .node.is-active {
background-color: #31363F;
}
.m-node .children {
transition: 1s;
}

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
}
.inspector {
margin-left: 400px;
}
.inspector pre {
font-family: Menlo;
font-size: 13px;
}

最后还有一个坑就是他跟bootstrap是有冲突的，所以如果你使用了bootstrap再使用它，可能样式会有所改变。

demo可以从我的github上看到：

https://github.com/weifengzz/react-ui-tree-demo