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

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

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

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

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

  1. var cx = require('classnames');
  2. var React = require('react');
  3. var ReactDOM = require('react-dom');
  4. var Tree = require('react-ui-tree');
  5. var tree = require('./tree');
  6. require('react-ui-tree/dist/react-ui-tree.css')
  7. require('./css.css')
  8.  
  9. var UiTree = React.createClass({
  10. getInitialState() {
  11. return {
  12. active: null,
  13. tree: tree
  14. };
  15. },
  16.  
  17. renderNode(node) {
  18. return (
  19. <span className={cx('node', {
  20. 'is-active': node === this.state.active
  21. })} onClick={this.onClickNode.bind(null, node)}>
  22. {node.module}
  23. </span>
  24. );
  25. },
  26.  
  27. onClickNode(node) {
  28. this.setState({
  29. active: node
  30. });
  31. },
  32.  
  33. render() {
  34. return (
  35. <div className="app">
  36. <div className="tree">
  37. <Tree
  38. paddingLeft={20}
  39. tree={this.state.tree}
  40. onChange={this.handleChange}
  41. isNodeCollapsed={this.isNodeCollapsed}
  42. renderNode={this.renderNode}
  43. />
  44. </div>
  45. <div className="inspector">
  46. <button onClick={this.updateTree}>update tree</button>
  47. <pre>
  48. {JSON.stringify(this.state.tree, null, ' ')}
  49. </pre>
  50. </div>
  51. </div>
  52. );
  53. },
  54.  
  55. handleChange(tree) {
  56. this.setState({
  57. tree: tree
  58. });
  59. },
  60.  
  61. updateTree() {
  62. var tree = this.state.tree;
  63. tree.children.push({module: 'test'});
  64. this.setState({
  65. tree: tree
  66. });
  67. }
  68. });
  69.  
  70. module.exports = UiTree;

下面是数据:

  1. module.exports = {
  2. module: 'react-ui-tree',
  3. children: [{
  4. module: 'dist',
  5. collapsed: true,
  6. children: [{
  7. module: 'node.js',
  8. leaf: true
  9. }, {
  10. module: 'react-ui-tree.css',
  11. leaf: true
  12. }, {
  13. module: 'react-ui-tree.js',
  14. leaf: true
  15. }, {
  16. module: 'tree.js',
  17. leaf: true
  18. }]
  19. }, {
  20. module: 'example',
  21. children: [{
  22. module: 'app.js',
  23. leaf: true
  24. }, {
  25. module: 'app.less',
  26. leaf: true
  27. }, {
  28. module: 'index.html',
  29. leaf: true
  30. }]
  31. }, {
  32. module: 'lib',
  33. children: [{
  34. module: 'node.js',
  35. leaf: true
  36. }, {
  37. module: 'react-ui-tree.js',
  38. leaf: true
  39. }, {
  40. module: 'react-ui-tree.less',
  41. leaf: true
  42. }, {
  43. module: 'tree.js',
  44. leaf: true
  45. }]
  46. }, {
  47. module: '.gitiignore',
  48. leaf: true
  49. }, {
  50. module: 'index.js',
  51. leaf: true
  52. }, {
  53. module: 'LICENSE',
  54. leaf: true
  55. }, {
  56. module: 'Makefile',
  57. leaf: true
  58. }, {
  59. module: 'package.json',
  60. leaf: true
  61. }, {
  62. module: 'README.md',
  63. leaf: true
  64. }, {
  65. module: 'webpack.config.js',
  66. leaf: true
  67. }]
  68. }

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

  1. .tree {
  2. position: fixed;
  3. top:;
  4. left:;
  5. bottom:;
  6. width: 300px;
  7. overflow-x: hidden;
  8. overflow-y: auto;
  9. background-color: #21252B;
  10. }
  11. .m-node.placeholder {
  12. border: 1px dashed #1385e5;
  13. }
  14. .m-node .inner {
  15. color: #9DA5B4;
  16. font-size: 12px;
  17. font-family: Menlo;
  18. }
  19. .m-node .node {
  20. display: inline-block;
  21. width: 100%;
  22. padding: 4px 5px;
  23. }
  24. .m-node .node.is-active {
  25. background-color: #31363F;
  26. }
  27. .m-node .children {
  28. transition: 1s;
  29. }
  30.  
  31. *,
  32. *:before,
  33. *:after {
  34. -webkit-box-sizing: border-box;
  35. -moz-box-sizing: border-box;
  36. box-sizing: border-box;
  37. }
  38. body {
  39. margin:;
  40. padding:;
  41. font-size: 100%;
  42. }
  43. .inspector {
  44. margin-left: 400px;
  45. }
  46. .inspector pre {
  47. font-family: Menlo;
  48. font-size: 13px;
  49. }

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

demo可以从我的github上看到:

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

React react-ui-tree的使用的更多相关文章

  1. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  2. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  3. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  4. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  5. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  6. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  7. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  8. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  9. 使用CRA开发的基于React的UI组件发布到内网NPM上去

    前言:构建的ES组件使用CNPM发布内网上过程 1. 使用Create-React-APP开的组件 如果直接上传到NPM,你引用的时候会报: You may need an appropriate l ...

  10. [React] Optimistic UI update in React using setState()

    In this lesson we will refactor an existing UI update from a typical loading approach to an optimist ...

随机推荐

  1. java文件读写的两种方式

    今天搞了下java文件的读写,自己也总结了一下,但是不全,只有两种方式,先直接看代码: public static void main(String[] args) throws IOExceptio ...

  2. 初识数据字典【weber出品必属精品】

    数据字典结构 有两部分组成: 1. 基表:以$结尾的系统表,在创建数据库的时候,oracle自动创建的表 2. 用户可以访问的视图 数据字典的种类 DICTIONARY:简称DICT,所有的数据字典, ...

  3. CC3的多列属性Multi-column

    CC3的多列属性Multi-column 一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便. 0 16-09-17 1 16 ...

  4. mac删除顽固图标

    cd  /Users/shelley/Library/Application\ Support/Dock cp  10CCA448-0975-41DE-B47A-8E89FD634227.db  10 ...

  5. android与PC互传文件 adb push

    1- df 命令查看文件系统的磁盘空间占用情况 shell@android:/ # adb shell df 2- 找到data文件夹, 上传 adb push /data/Sogou  Input_ ...

  6. 生成bundle和移除bundle

    1.命令行生成bundle $ php bin/console generate:bundle --namespace=Acme/TestBundle 2.移除bundle(新的bundle) App ...

  7. ios 多线程 面试

    1 多线程是什么  同步完成多项任务,提高了资源的使用效率,从硬件.操作系统.应用软件不同的角度去看,多线程被赋予不同的内涵,对于硬件,现在市面上多数的CPU都是多核的,多核的CPU运算多线程更为出色 ...

  8. shell脚本的桩

    项目代码: alias book_search="/usr/local/mysql/bin/mysql -h 172.18.12.202 -uppstat -pstatpp book_sea ...

  9. 图片以BLOB存储在后台数据库中,Android客户端要进行读取显示

    解决方法: 1:在后台以InputStream的方式将图片从数据库中读出: public static InputStream getPicInputStream(){ String id = &qu ...

  10. ScrollView中添加ListView

    <p>.要点一:去除ListView的scrollBar,添加ScrollView的scrollBar:</p> <ScrollView android:layout_w ...