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

原创 2016年09月02日 01:21:58
在编写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组件封装与传值

转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-component-packaging-and-...
  • qwe1134502476
  • qwe1134502476
  • 2016年02月19日 08:24
  • 4583

React native从入门到深入 ---页面传值,父子组件传值

前言 http://www.jianshu.com/p/d4b7f8f322b6最近这段时候,本想做一个小的demo,不过发现,理想和美好,现实很骨感,在做的过程中遇到了很多的问题。最重要的一个...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月17日 15:03
  • 1110

React组件之间传值

前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可...
  • limm33
  • limm33
  • 2016年03月21日 10:07
  • 32994

react native 子控件传递数据给父控件

/** * Created by fanxiaole on 17/3/24. * 需求 在子控件(select)中选择性别 在父控件(form)中获取这个值并提交 * */ //步骤 ...
  • hehe0705
  • hehe0705
  • 2017年03月24日 15:47
  • 1554

ReactNative 如何获取组件的引用

refs相关资料见:http://reactnative.cn/post/608
  • klabcxy36897
  • klabcxy36897
  • 2017年07月25日 18:03
  • 683

React-Native-ListView、ListViewItem(子、父组件互相传值)

首先记录下实现ListView的过程吧http://www.jianshu.com/p/031df20b0e78 constructor(props) { super(props)...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月05日 22:02
  • 1020

react native不同组件间传递值

事件的订阅与发送:DeviceEventEmitter注册事件监听import { DeviceEventEmitter, } from 'react-native';class XiFan ex...
  • a631855639
  • a631855639
  • 2016年08月15日 15:45
  • 1540

《React-Native系列》30、 RN组件间通信

今天我们来说一说RN的组件之间的通信。ReactNative的核心之一是他的组件化,组件化的核心是组件之间的通信。组件是有层级来区分的,譬如:父组件 子组件。我们先来讲解一个例子。这个是我们要实现的功...
  • hsbirenjie
  • hsbirenjie
  • 2016年09月13日 09:11
  • 4015

ReactNative开发——组件的生命周期

ReactNative开发——组件的生命周期使用ES6语法创建Component我查看了下网上有关React Native中组件的生命周期有关的资料,发现大多介绍的是 ReactClass.creat...
  • a992036795
  • a992036795
  • 2017年06月06日 14:23
  • 1069

React native全局变量的使用(跨组件的通信)

RN中有两种方式使用全局变量 1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.co...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月24日 05:40
  • 8722
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-Native学习十九:组件之间的通信-1
举报原因:
原因补充:

(最多只允许输入30个字)