https://github.com/xyzdata/redux-simple-tutorial
//
https://github.com/kenberkeley/react-scaffold
https://github.com/kenberkeley/react-demo
//
http://react-china.org/t/reactjs/4716/2
import React, {Component} from 'react';
class RMT extends 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(
(v) => {
let node = (
<li key={this.count++}>
{v.text}
</li>
);
if (v.children && v.children.length) {
node = (
<li key={this.count++}>
<span>{v.text}</span>
{this.markNode(v.children)}
</li>
);
}
return node;
}
);
}
return (
<ul>{nodes}</ul>
);
};
render() {
this.count = 0;
return(
this.markNode(this.state.data)
);
}
}
export default RMT;
https://github.com/negomi/redux-burger-menu
https://github.com/negomi/react-burger-menu
https://github.com/codrops/OffCanvasMenuEffects
https://github.com/codrops/SidebarTransitions
https://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
https://tympanus.net/Development/MultiLevelPushMenu/index.html
https://yuerblog.cc/2016/11/09/unlimited-hierarchical-menu-with-react/
https://github.com/slashhuang/react-drop-tree
https://github.com/slashhuang/redux-annotation
https://segmentfault.com/q/1010000009935830
https://github.com/vkbansal/react-contextmenu
https://facebook.github.io/react/docs/optimizing-performance.html#using-immutable-data-structures
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
);
react+state+immutiable
https://github.com/facebook/immutable-js/wiki/Immutable-as-React-state
https://facebook.github.io/react/docs/update.html
https://facebook.github.io/react/docs/optimizing-performance.html#the-power-of-not-mutating-data
ES6
Object.assign()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
ES7
object spread properties