The father the son
1. Upload values through props
Example:
/ / child component
class SonCompoent extends Component{
render() {
return (
<View>
<Text>{this. Props. The name} son</Text>
</View>
);
};
}
/ / the parent component
class FatherComponet extends Component {
render() {
return (
<View>
<SonCompoent name={this.props.name}/>
</View>); }}Copy the code
The parent passes a property (such as name) to the child, adding name=’ XXX ‘to the parent; The child component gets the value of name from this.props. Name.
Child the parent
1. Perform the functions callback
Example:
/ / child component
class SonCompoent extends Component{
sendName() {
this.props.getName('Tom');
}
render() {
return (
<View>
<Text onPress={this.sendName.bind(this)}>Tom</Text>
</View>
);
};
}
/ / the parent component
class FatherComponet extends Component {
getName(name) {
console.log('Son's name is'+ name);
}
render() {
return (
<View>
<SonCompoent getName={this.getName.bind(this)}/>
</View>); }}Copy the code
The child component modifies the name property of the parent component by calling the method getName passed in to props.
2. Call through ref
Example:
/ / child component
class SonCompoent extends Component{
constructor(props){
super(props);
this.name = 'Tom';
this.state = {};
}
render() {
return (
<View>
<Text>Tom</Text>
</View>
);
};
}
/ / the parent component
class FatherComponet extends Component {
constructor(props){
super(props);
this.son = {};
}
sendName() {
console.log('Son's name is'+ this.son.name);
}
render() {
return (
<View>
<SonCompoent ref={(v)= >{ this.son = v; }} / ></View>); }}Copy the code
The parent component fetches the child component object through the REF method, which in turn fetches the child component’s name property.
Note: the method of ref in the parent component should be written asref={(v) => { this.XXX = v; }
Otherwise, esLint will give an error
Peer component passing
DeviceEventEmitter method
class DiDiCompoent extends Component{
constructor(props){
super(props);
this.state = {
money:0}}componentDidMount() {
this.age = 10;
this.age = 20;
console.log(this.age);
// Define attributes, but changes to this attribute do not trigger render
this.lister = DeviceEventEmitter.addListener('makeMoney'.(money) = >{
this.setState({
money:money }); })}componentWillUnmount() {
this.lister.remove();
}
render() {
return (
<View style={styles.didiStyle}>
<Text>Younger brother</Text>
<Text>Receive {this.state.money} pocket money</Text>
</View>
);
};
}
class GeGeComponet extends Component {
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}} >
<Text>The elder brother</Text>
<Text onPress={()= >{ DeviceEventEmitter.emit('makeMoney',100); }}> Pay living expenses</Text>
</View>); }}Copy the code
GeGeComponet gives DiDiCompoent pocket money:
- Passes in the elder brother component
DeviceEventEmitter.emit('makeMoney',100)
, triggering eventmakeMoney
Pass ‘pocket money’ 100. - Passes in the younger brother component
DeviceEventEmitter.addListener('makeMoney', fn(value))
To listen tomakeMoney
Event and get the valuevalue
reference
ReactNative parent-child component value transfer (5)