React component is the core, and thus crucial to understand how to use them to create good design structure.
Way to pass information between the components:
1. (parent components) to communicate information (sub-assembly)
2. (sub-assembly) to pass information (parent component)
3. No nesting relationship between the components pass a value (for example: value passed between components Brothers)
The following detailed description with examples of the types of transfer method information.
The following example is my personal opinion, I hope for your help.
A, (parent components) to (sub-assembly) to pass information mainly through the prop >>>
Look at the following example
//父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
render: function() {
return (
<ToggleButton text="Toggle me" checked={this.state.checked} />
);
}
});
// 子组件
var ToggleButton = React.createClass({
render: function () {
// 从（父组件）获取的值
var checked = this.props.checked,
text = this.props.text;
return (
<label>{text}: <input type="checkbox" checked={checked} /></label>
);
}
});
Above this example, to get the text value subassembly and attribute values checked by the prop; then when the sub-assembly to get the information grandparent component, layer by layer also may be performed by acquiring prop.
II (sub-assembly) to pass information (parent component)
// 父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
onChildChanged: function (newState) {
this.setState({
checked: newState
});
},
render: function() {
var isChecked = this.state.checked ? 'yes' : 'no';
return (
<div>
<div>Are you checked: {isChecked}</div>
<ToggleButton text="Toggle me"
initialChecked={this.state.checked}
callbackParent={this.onChildChanged}
/>
</div>
);
}
});
return (
// subassembly
var = React.createClass the ToggleButton ({
getInitialState that: function () {
return {
the checked: this.props.initialChecked
};
},
onTextChange: function () {
var = newState The this.state.checked;!
This.setState ({
the checked: newState the
});
// this information is transmitted to the subassembly parent component
this.props.callbackParent (newState the);
},
the render: function () {
// acquired from the (parent component) values
var text this.props.text =;
// status data of the component itself
var = this.state.checked the checked;
// onChange event after event check box for changing the trigger of the box.
<label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange} /></label>
);
}
});
In the above example, the parent component binding callbackParent = {this.onChildChanged}, using the subassembly this.props.callbackParent (newState), triggered this.onChildChanged method parent, and then the data sub-assembly (newState The) transmitted to the parent component.
In fact, doing so is dependent on props to pass a reference to the event, and is achieved by way of a callback.
Third, there is no any traditional values nesting relationship between the components (for example: value passed between components Brothers)
Legend Brothers //
// React module 1 is introduced.
Import from React 'REACT';
Import SON1 from './Son1';
Import Son2 from './Son2';
. 2 // declare a class to inherit React.Component
class Father {React.Component the extends
constructor () {
Super ();
this.state = {
Message: ""
}
}
// this function is used to receive data function Son1.js component
Son1data (MSG) {
this.setState ({
Message: MSG,
})
}
//. 3. rewrite rendering
the render () {
return (
<React.Fragment>
<SON1 Son1data this.Son1data.bind = {(the this)}> </ SON1>
<= {Son2 the this Mess. state.message}></Son2>
</React.Fragment>
)
}
}
. @. 4 is exposed outwardly
Export default Father;
// js code subassembly 1
// React module 1 is introduced.
Import from React 'REACT';
// SON1 subassembly
// 2. declaring class to inherit React.Component
class SON1 the extends React.Component {
// function button click event
Son1click () {
this.props.Son1data ( 'which are generated from the data Son.js');
}
// 3. override rendering
the render () {
return (
<React.Fragment>
<Button this.Son1click.bind the onClick = {(the this)}> Son1.js array data acquired </ Button>
</React.Fragment>
)
}
}
// 4 is exposed outwardly
export default Son1;
@ js code subassembly 2
// 1. React module incorporated
React from Import 'REACT';
// declare a class 2, should inherit React.Component.
class Son2 the extends React.Component {
// override. 3 rendering method.
the render () {
return (
<React.Fragment>
{this.props. } Mess
{the console.log (this.props.mess)}
</React.Fragment>
)
}
}
. //. 4 is exposed outwardly
export default Son2;
What are props
1.1.props property
- First on the component custom property by assignment.
- Function component in the function definition parameter props, props. Attribute name in the function.
- Class components by this.props. Attribute name.
The role of 1.2.props
- Between the traditional values for the components.
1.3.props features
- Read-only, it can not be modified.
to sum up
1. The parent component subassembly to pass through the state value, obtain the value of the parent sub-assembly components transmitted by props.
2. The method of the parent sub-assembly component acquiring function defined by the prop, but needs stated in the parent component tag call subassembly.
3. parent component subassemblies declaration calls by refs, but you need to add a node to the ref subassembly
4. communication between the components does not have to sink in these associations immediacy of things, our thinking can also be a highly refreshing, can get in the action-reduce.