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