React child start test
by neosoyn
HTML
<script src="http://fb.me/react-with-addons-0.11.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
/** @jsx React.DOM */
var Wrapper = React.createClass({
getInitialState: function() {
return {age: 100, style: 1};
},
handleChange: function() {
console.log('handle in wrapper');
//this.setState({age: this.state.age * 3, style: this.state.style * 3});
this.setState({hello: 'good'});
},
render: function() {
console.log('render wrapper');
return <Child age={this.state.age} style={this.state.style} onChange={this.handleChange}/>;
}
});
var Child = React.createClass({
getInitialState: function() {
return {age: this.props.age};
},
handleClick: function() {
console.log('handle child click');
// this.setState({age: this.state.age * 2});
this.props.onChange();
},
componentWillReceiveProps: function(nextProps) {
console.log(nextProps);
// this.setState({age: nextProps.age});
},
render: function() {
console.log('render child');
return (
<div onClick={this.handleClick}>Hello {this.state.age}, {this.props.style}</div>
);
}
});
React.renderComponent(<Wrapper />, document.body);