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

最新推荐文章于 2024-07-27 00:10:42 发布

1024工场

最新推荐文章于 2024-07-27 00:10:42 发布

阅读量9.7k

点赞数 4

分类专栏： React Native 手把手教导React-Native 文章标签： react-native props state

本文链接：https://blog.csdn.net/p106786860/article/details/52408875

版权

本文探讨了React-Native中组件间的通信方式，主要聚焦于使用props和state进行数据传递和状态管理。通过实例展示了如何在组件之间有效地传递信息。

摘要由CSDN通过智能技术生成

在编写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);

运行如下如：