ReactNative-组件传值(五)

1.父子顺传

1.1父传子，通过props

• 父控件提供属性
  <FatherComponet name="xmg" />
<SonCompoent name={this.props.name}/>
• 子控件获取属性
  this.props.name
• 使用props代码示例

// 子组件
class  SonCompoent extends Component{

    render() {
        return (
            <View style={styles.sonViewStyle}>
                      <Text style={{fontSize:20}}>{this.props.name}的baby</Text>
            </View>
        );
    };
}

// 父组件
class FatherComponet extends Component {

    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                    <SonCompoent  name={this.props.name}/>
            </View>
        );
    }
}

// 主组件
export default class ReactDemo extends Component {
    render() {
        return (
            <FatherComponet name="xmg" />
        );
    }
}

1.2.父传子，通过ref

• 定义ref
  <SonCompoent ref="son" />
• 获取子组件，执行指定方法，方法参数中传值
  this.refs.son.receiveMoney(1000);
• 使用ref代码示例

class  SonCompoent extends Component{
    constructor(props){
        super(props);
        this.state = {
            money:0
        }
    }
receiveMoney(money){
        this.setState({
            money:money
        });
    }
render() {
        return (
            <View style={styles.sonViewStyle}>
                <Text>总共收到{this.state.money}生活费</Text>
            </View>
        );
    };
}

class FatherComponet extends Component {
    render() {
        return (
            <View style={{flex:1,alignItems:'center'}}>
                 <Text style={{marginTop:100}} onPress={()=>{
                    this.refs.son.receiveMoney(1000);
                }}>发生活费</Text>
                <SonCompoent ref="son" />
            </View>
        );
    }
}

2.父子逆传

2.1.通过bind(this)

• 父组件中定义方法，然后绑定该方法
  <SonCompoent receiveMoney={this.receiveMoney.bind(this)}/>
• 子组件通过this.props获取方法调用
  this.props.receiveMoney(money);

class  SonCompoent extends Component{

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

    render() {
        return (
             <View style={styles.sonViewStyle}>
                <Text style={{fontSize:20}}>{this.props.name}的baby</Text>
                <Text onPress={this.makeMoney.bind(this,100)}>赚100块钱</Text>
            </View>
        );
    };
}

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 (
             <View style={{flex:1,alignItems:'center'}}>
                <SonCompoent receiveMoney={this.receiveMoney.bind(this)}/>
                <Text style={{marginBottom:50}}>爸爸收到{this.state.money}</Text>
            </View>
        );
    }
}
export default class ReactDemo extends Component {
  render() {
    return (
        <FatherComponet/>
    );
  }
}

3.无关组件间传值

• 使用通知
• 发送通知
  DeviceEventEmitter.emit('makeMoney',100);
• 添加监听者，定义执行方法
  this.lister = DeviceEventEmitter.addListener('makeMoney',(money)=>{ this.setState({ money:money }); })
• 移除监听者
  componentWillUnmount() { this.lister.remove(); }
• 通知使用代码

class  DiDiCompoent extends Component{

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

componentDidMount() {
        this.age = 10;
        this.age = 20;

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

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

render() {
        return (
            <View style={styles.didiStyle}>
                <Text> 弟弟</Text>
                <Text>收到{this.state.money}零花钱</Text>
            </View>
        );
    };
}
class GeGeComponet extends Component {

    render() {
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                   <Text>哥哥</Text>
                <Text onPress={()=>{
                    DeviceEventEmitter.emit('makeMoney',100);
                }}>发生活费</Text>
            </View>
        );
    }
}

export default class ReactDemo extends Component {
    render() {
        return (
            <View style={{flex:1}}>
                <GeGeComponet />
                <DiDiCompoent />
            </View>
        );
    }
}