[] To the component [parent] by value subassembly
Preliminary use
This is fairly easy, in the course of development often use React to use, mainly using props to communicate. Examples are as follows:
-
1 // 父组件 2 3 var MyContainer = React.createClass({ 4 5 getInitialState: function () { 6 7 return { 8 9 checked: true 10 11 }; 12 13 }, 14 15 render: function() { 16 17 return ( 18 19 <ToggleButton text="Toggle me" checked={this.state.checked} /> 20 21 ); 22 23 } 24 25 }); 26 is 27 28 29 @ subassembly 30 31 is var the ToggleButton = React.createClass ({ 32 33 is the render: function () { 34 is 35 // value from the parent component [obtained] 36 37 [ var the checked = the this .props.checked, 38 is 39 text = the this .props.text; 40 41 is 42 is 43 is return ( 44 is 45 <label>{text}: <input type="checkbox" checked={checked} /></label> 46 47 ); 48 49 } 50 51 });
If the component nesting level too deep, then from outside to inside components of transaction costs becomes very high, the advantages of props passed by value is not so obvious.
// parent component var MyContainer = React.createClass({ render: function() { return ( <Intermediate text="where is my son?" /> ); } }); // subassembly 1: Nested intermediate assembly var Intermediate = React.createClass({ render: function () { return ( <Child text={this.props.text} /> ); } }); // subassembly 2: 1 sub-assembly of the subassembly var Child = React.createClass({ render: function () { return ( <span>{this.props.text}</span> ); } });