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:;
- left:;
- bottom:;
- 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:;
- padding:;
- 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
React react-ui-tree的使用的更多相关文章
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [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 ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
- 使用CRA开发的基于React的UI组件发布到内网NPM上去
前言:构建的ES组件使用CNPM发布内网上过程 1. 使用Create-React-APP开的组件 如果直接上传到NPM,你引用的时候会报: You may need an appropriate l ...
- [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 ...
随机推荐
- java文件读写的两种方式
今天搞了下java文件的读写,自己也总结了一下,但是不全,只有两种方式,先直接看代码: public static void main(String[] args) throws IOExceptio ...
- 初识数据字典【weber出品必属精品】
数据字典结构 有两部分组成: 1. 基表:以$结尾的系统表,在创建数据库的时候,oracle自动创建的表 2. 用户可以访问的视图 数据字典的种类 DICTIONARY:简称DICT,所有的数据字典, ...
- CC3的多列属性Multi-column
CC3的多列属性Multi-column 一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便. 0 16-09-17 1 16 ...
- mac删除顽固图标
cd /Users/shelley/Library/Application\ Support/Dock cp 10CCA448-0975-41DE-B47A-8E89FD634227.db 10 ...
- android与PC互传文件 adb push
1- df 命令查看文件系统的磁盘空间占用情况 shell@android:/ # adb shell df 2- 找到data文件夹, 上传 adb push /data/Sogou Input_ ...
- 生成bundle和移除bundle
1.命令行生成bundle $ php bin/console generate:bundle --namespace=Acme/TestBundle 2.移除bundle(新的bundle) App ...
- ios 多线程 面试
1 多线程是什么 同步完成多项任务,提高了资源的使用效率,从硬件.操作系统.应用软件不同的角度去看,多线程被赋予不同的内涵,对于硬件,现在市面上多数的CPU都是多核的,多核的CPU运算多线程更为出色 ...
- shell脚本的桩
项目代码: alias book_search="/usr/local/mysql/bin/mysql -h 172.18.12.202 -uppstat -pstatpp book_sea ...
- 图片以BLOB存储在后台数据库中,Android客户端要进行读取显示
解决方法: 1:在后台以InputStream的方式将图片从数据库中读出: public static InputStream getPicInputStream(){ String id = &qu ...
- ScrollView中添加ListView
<p>.要点一:去除ListView的scrollBar,添加ScrollView的scrollBar:</p> <ScrollView android:layout_w ...