My fix for the example

[qqdaiyu55]

The example in the repo is outdated, so I analyzed the code of the demo page.

app.js

const React = require('react')
const Tree = require('react-ui-tree')
const cx = require('classnames')

const tree = require('./tree')

class App extends React.Component {
  constructor (props) {
    super(props)

    this.active = null
    this.state = {
      tree: tree
    }

    this.onClickNode = this.onClickNode.bind(this)
    this.renderNode = this.renderNode.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  render () {
    return (
        <div className='tree'>
          <Tree
            paddingLeft={15}
            onChange={this.handleChange}
            isNodeCollapsed={this.isNodeCollapsed}
            tree={this.state.tree}
            renderNode={this.renderNode}
          />
        </div>
    )
  }

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

  onClickNode (node) {
    this.active = node
  }

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

module.exports = App

theme.css

.tree {
  /* Your definition here*/
}

.f-no-select, .m-tree {
  user-select: none;
}
.m-draggable{
  position: absolute;
  opacity: .8;
  user-select: none;
}
.m-node.placeholder > * {
  visibility: hidden;
}
.m-node.placeholder {
  border: 1px dashed #ccc;
}
.m-node .inner {
  position: relative;
  cursor: pointer;
  padding-left: 10px;
  color: #9da5b4;
  font-size: 12px;
  font-family: Menlo;
}
.m-node .collapse {
  position: absolute;
  left: 0;
  cursor: pointer;
}
.m-node .caret-right:before {
  content: "\25B8";
}
.m-node .caret-down:before{
  content: "\25BE";
}
.m-node .node {
  display: inline-block;
  width: 100%;
  padding: 4px 5px;
}
.m-node .node.is-active {
  background-color:#31363f;
}