https://github.com/xyzdata/redux-simple-tutorial
//
https://github.com/kenberkeley/react-scaffold
https://github.com/kenberkeley/react-demo
//
event.preventDefault()
& stopPropagation()
https://facebook.github.io/react/docs/handling-events.html
https://facebook.github.io/react/docs/events.html
class RMT extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data || []
};
}
// 递归调用
markNode = (data) => {
let nodes;
if (Object.prototype.toString.call(data) == "[object Array]") {
nodes = data.map(
(item) => {
let node = (
<li
key={this.count++}
style={{color: 'red'}}
onClick={(e) => this.props.onClick(e)}
>
<span>{item.text}</span>
</li>
);
if (item.children && item.children.length) {
node = (
<li
key={this.count++}
style={{color: 'green', marginLeft: '10px'}}
onClick={(e) => this.props.onClick(e)}
>
<span>{item.text}</span>
{this.markNode(item.children)}
</li>
);
}
return node;
}
);
}
return (
<ul style={{border: '1px solid red'}} onClick={this.props.onClick}>
{nodes}
</ul>
);
};
render() {
this.count = 0;
return(
this.markNode(this.state.data)
);
}
}
export {RMT};
export default RMT;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
//
};
}
onClick = (e) => {
// 阻止事件的默认行为,防止事件冒泡!
e.preventDefault();
e.stopPropagation();
alert(`e`, e.key);
};
render () {
const datas = [
{
text: 'root',
children: [
{
text: 'chlid1',
children: [
{
text: 'chlid3'
}
]
}
]
}
];
return (
<div>
<RMT data={datas} onClick={this.onClick}/>
</div>
);
}
}
ReactDOM.render(
<div>
<App />
</div>
, mountNode
);
e.key
???// import React, {Component} from 'react';
// import PropTypes from 'prop-types';
class RMT extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data || []
};
}
// 递归调用
markNode = (data) => {
let nodes;
if (Object.prototype.toString.call(data) == "[object Array]") {
nodes = data.map(
(item) => {
let node = (
<li
key={this.count++}
style={{color: 'red'}}
onClick={(e) => this.props.onClick(e)}
>
<span>{item.text}</span>
</li>
);
if (item.children && item.children.length) {
node = (
<li
key={this.count++}
style={{color: 'green', marginLeft: '10px'}}
onClick={(e) => this.props.onClick(e)}
>
<span>{item.text}</span>
{this.markNode(item.children)}
</li>
);
}
return node;
}
);
}
return (
<ul style={{border: '1px solid red'}} onClick={this.props.onClick}>
{nodes}
</ul>
);
};
render() {
this.count = 0;
return(
this.markNode(this.state.data)
);
}
}
export {RMT};
export default RMT;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
//
};
}
onClick = (e) => {
// 阻止事件的默认行为,防止事件冒泡!
e.preventDefault();
e.stopPropagation();
// alert(`e`, e.key);
console.log('e.key', e.key);
console.log('e.text', e.text);
console.log('e.innerHTML', e.innerHTML);
console.log('e.innerText', e.innerText);
};
render () {
const datas = [
{
text: 'root',
children: [
{
text: 'chlid1',
children: [
{
text: 'chlid3'
}
]
}
]
}
];
return (
<div>
<RMT data={datas} onClick={this.onClick}/>
</div>
);
}
}
export default App;
ReactDOM.render(
<div>
<App />
</div>
, mountNode
);
unlimited-hierarchical-menu
https://yuerblog.cc/2016/11/09/unlimited-hierarchical-menu-with-react/
react-drop-tree
https://github.com/slashhuang/react-drop-tree
https://github.com/slashhuang/redux-annotation
react-contextmenu
https://segmentfault.com/q/1010000009935830
https://github.com/vkbansal/react-contextmenu
immutable-data-structures
https://facebook.github.io/react/docs/optimizing-performance.html#using-immutable-data-structures