React-Native学习十九：组件之间的通信-1

时间：2022-01-17 07:09:57
在编写React程序的时候，大家会遇到很多React组件之间的通信问题，主要分为以下3种：
    1.父组件向子组件传值；
    2.子组件向父组件传值；
    3.没有任何嵌套的组件之间的传值（如兄弟组件之间传值）-后续章节介绍；
一、父组件向子组件传值
1.在父组件中通过属性传递给子组件，在子组件中通过this.props获取信息；
 
'use strict';import React from 'react';
import {
  ... ...
} from 'react-native';
//父组件
var MyAwesomeApp = React.createClass({
  getInitialState: function(){
    return{
      checked: false
    };
  },
  render: function(){
    return (
      <View style={styles.pagecontainer}>
        //通过属性this.state.xxx往子组件传递信息
        <ChildCompontent text='Toggle me' checked={this.state.checked}/>
      </View>
    )
  }
});


//子组件
var ChildCompontent = React.createClass({
  render: function() {
    return (
      //通过this.propps.xxx从父组件获取信息，使用父组件传递的信息{xxx}
      <View style={styles.childcompontent}>
        <Text>{this.props.text}</Text>
        <Switch value={this.props.checked}></Switch>
      </View>
    )
  }
});
var styles = StyleSheet.create({
  ... ...
});
AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);

运行如下如：

2.如果嵌套的层次太深，那么从外往内组件传递会比较纠结，需要通过props一层一层往下传递（当然你可以精简组件的层次）；
 
'use strict';import React from 'react';import {  ... ...} from 'react-native';//父组件var MyAwesomeApp = React.createClass({  render: function(){    return (      <View style={styles.pagecontainer}>        <ChildCompontent1 text='Toggle me too'/>      </View>    )  }});// 子组件1：中间嵌套的组件，使用this.props.xxx从父组件获取的信息，通过属性传递给自己的子组件var ChildCompontent1 = React.createClass({  render: function() {    return (      <ChildCompontent2 text={this.props.text}/>    )  }});... ...// 子组件n：子组件n-1的子组件，通过this.props获取它的父组件传递进来的信息var ChildCompontentn = React.createClass({  render: function() {    return (      <View style={styles.childcompontent}>        <Text>{this.props.text}</Text>      </View>    )  }});var styles = StyleSheet.create({  pagecontainer: {    flex: 1,    flexDirection:'column',  },  ... ... });AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);

运行如下：

二、子组件向父组件传值
1.子组件控制自己的state，然后通过父组件提供的回调方法，告诉父组件信息并在组件展示出来；
2.其实是依赖于props来传递事件的引用，并通过回调的方式来实现；
3.如果嵌套太深的话，就必须一次次回调传入的回调函数，来实现子组件向父组件传值或者操作；
 
'use strict';import React from 'react';import {  ... ...  View,} from 'react-native';// 父组件var MyAwesomeApp = React.createClass({  getInitialState: function () {    return {      checked: false    };  },  //子组件回调方法，更新父组件的状态机  onChildChanged: function (newState) {    this.setState({      checked: newState    });  },  render: function(){    var isChecked = this.state.checked ? 'yes' : 'no';    return (      <View style={styles.pagecontainer}>        <Text>Are you checked:{isChecked}</Text>        //向子组件传递属性和回调方法        <ChildCompontent text='Toggle me'          initialChecked={this.state.checked}          callbackParent={this.onChildChanged}/>      </View>    )  }});// 子组件var ChildCompontent = React.createClass({  getInitialState: function () {    return {      //从父组件获取初始化值      checked: this.props.initialChecked    };  },  render: function() {    return (      <View style={styles.childcompontent}>        <Text>{this.props.text}</Text>        <Switch value={this.state.checked} onValueChange={(value)=>{          // 子组件，调用回调方法传回信息，注意：setState 是一个异步方法，所以需要操作缓存的当前值          this.setState({checked: value});          this.props.callbackParent(this.state.checked);        }}/>      </View>    )  }});var styles = StyleSheet.create({  ... ...});AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);
运行如下：
 
4.多个子组件使用同一个回调的情况，当子组件改变的时候，使用同一个子组件的回到来给父组件返回值； 
'use strict';import React from 'react';import {  AppRegistry,  ... ...} from 'react-native';// 父组件var MyAwesomeApp = React.createClass({  getInitialState: function () {    return {      initialChecked: false,      totalChecked: 0    };  },  //所以子组件回调该方法，传回最新的信息,根据传回信息计算总共选中的个数  onChildChanged: function (newState) {    var newTotal = this.state.totalChecked + (newState ? 1 : -1);    this.setState({      totalChecked: newTotal,    });  },  render: function(){    var isChecked = this.state.checked ? 'yes' : 'no';    return (      <View style={styles.pagecontainer}>        <Text>How many are checked:{this.state.totalChecked}</Text>        //多个子组件，统计回调父组件的onChildChanged方法        <ChildCompontent text='Toggle me'          initialChecked={this.state.initialChecked}          callbackParent={this.onChildChanged}/>        <ChildCompontent text='Toggle me too'          initialChecked={this.state.initialChecked}          callbackParent={this.onChildChanged}/>        <ChildCompontent text='Toggle me too too '          initialChecked={this.state.initialChecked}          callbackParent={this.onChildChanged}/>      </View>    )  }});// 子组件var ChildCompontent = React.createClass({  getInitialState: function () {    return {      checked: this.props.initialChecked    };  },  render: function() {    return (      <View style={styles.childcompontent}>        <Text>{this.props.text}</Text>        <Switch value={this.state.checked} onValueChange={(value)=>{          this.setState({checked: value});          this.props.callbackParent(this.state.checked);        }}/>      </View>    )  }});var styles = StyleSheet.create({  ... ...});AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);

运行如下：


新技术，新未来！欢迎大家关注 “1024工场”微信服务号 ，时刻关注我们的最新的技术讯息！ （甭客气！尽情的扫描或者长按！）
React-Native学习十九：组件之间的通信-1

标签：

相关文章