用React写了段代码其中App.jsx大部分是直接照扒React-UI-Tree这个组件的,用webpack编译打包后浏览器回应了这么个错误,代码应该是没问题不知问题在哪0.0
图一左侧代码:
import ReactDOM from 'react-dom';
import cx from 'classnames';
import React from 'react';
import Tree from 'react-ui-tree';
export default class App extends React.Component {
constructor() {
super();
this.state = {
active : null,
tree : {
"module": "react-ui-tree",
"children": [{
"collapsed": true,
"module": "dist",
"children": [{
"module": "node.js"
}]
}]
}
};
}
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
});
}
}
把你
this.state.active
的源码贴出来,编译后的真心不想看,看完也没法给你说问题render
改一下: