ReactNative之父子组件传值（五）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之父子组件传值

顺传（父传子）

• 1.通过props传值
• 案例：父控件给子控件传递名称，子控件根据父控件提供的名称显示谁的儿子

// 子组件
class  SonCompoent extends Component{

    render() {
        return (
            
                {this.props.name}的baby
            
        );
    };
}

// 父组件
class FatherComponet extends Component {
    
    render() {
        return (
            
                
            
        );
    }
}

// 主组件
export default class ReactDemo extends Component {
    render() {
        return (
            
        );
    }
}

const styles = StyleSheet.create({
    sonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    }

});

• 2.有时候需要拿到组件传值，通过ref拿到控件给控件传值。
• 案例：爸爸每个月，给儿子生活费.
• 使用箭头函数解决绑定this问题

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class  SonCompoent extends Component{

    constructor(props){
        super(props);

        this.state = {
            money:0
        }
    }

    receiveMoney(money){
        this.setState({
            money:money
        });
    }

    render() {
        return (
            
                {this.props.name}的baby
                总共收到{this.state.money}生活费
            
        );
    };
}

class FatherComponet extends Component {


    render() {
        return (
            
                {
                    this.refs.son.receiveMoney(1000);
                }}>发生活费
                
            
        );
    }
}

export default class ReactDemo extends Component {
  render() {
    return (
        
    );
  }
}

const styles = StyleSheet.create({
    sonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    }

});

AppRegistry.registerComponent('React', () => ReactDemo);

逆传（子传父）

• 使用方法回调
  • 1.在父组件中定义一个处理接收到值的方法
  • 2.把这个方法传递给子组件，并且绑定this,子组件就能通过this.props拿到这个方法调用
• 案例：儿子赚钱了，把赚的钱传递给父亲

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class  SonCompoent extends Component{

    makeMoney (money) {
        // 传递给父控件
        console.log('赚了'+ money);
        console.log(this)
        this.props.receiveMoney(money);

    }

    render() {
        return (
            
                {this.props.name}的baby
                赚100块钱
            
        );
    };
}

class FatherComponet extends Component {

    constructor(props){
        super(props);
        console.log(this);
        this.state = {
            money:0
        };
    }

    receiveMoney(money) {
        console.log('爸爸收到'+ money);

        console.log(this);

        var m = this.state.money;

        m += money;

        this.setState({
            money:m
        });

    }

    render() {
        return (
            
                
                
                爸爸收到{this.state.money}
            
        );
    }
}



export default class ReactDemo extends Component {
  render() {
    return (
        
    );
  }
}

const styles = StyleSheet.create({
    sonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    }

});

AppRegistry.registerComponent('React', () => ReactDemo);

无关联组件传值(通知)

• 当两个组件，互相之间拿不到谁的时候，可以用通知传值.
  • 哥哥赚钱了，给弟弟花

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    DeviceEventEmitter
} from 'react-native';

class  DiDiCompoent extends Component{

    constructor(props){
        super(props);

        this.state = {
            money:0
        }
    }


    componentDidMount() {

        this.age = 10;
        this.age = 20;

        console.log(this.age);

        // 定义属性,但是对这个属性的修改不会触发render
        this.lister = DeviceEventEmitter.addListener('makeMoney',(money)=>{
            this.setState({
                money:money
            });
        })
    }

    componentWillUnmount() {
        this.lister.remove();
    }


    render() {
        return (
            
                 弟弟
                收到{this.state.money}零花钱
            
        );
    };
}

class GeGeComponet extends Component {

    render() {
        return (
            
                哥哥
                {
                    DeviceEventEmitter.emit('makeMoney',100);
                }}>发生活费
            
        );
    }
}

export default class ReactDemo extends Component {
    render() {
        return (
            
                
                
            

        );
    }
}

const styles = StyleSheet.create({
        didiStyle:{
            flex:1,
            justifyContent:'center',
            alignItems:'center'
        }

});

AppRegistry.registerComponent('React', () => ReactDemo);