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 componentDeviceEventEmitter.emit('makeMoney',100), triggering eventmakeMoneyPass ‘pocket money’ 100.
  • Passes in the younger brother componentDeviceEventEmitter.addListener('makeMoney', fn(value))To listen tomakeMoneyEvent and get the valuevalue

reference

ReactNative parent-child component value transfer (5)