美文网首页
react native父组件和子组件通信(传参)

react native父组件和子组件通信(传参)

作者: _越努力_越幸运 | 来源:发表于2018-07-13 09:48 被阅读0次

参考:React-Native 发送和接收事件DeviceEventEmitter

           005-React-Native子组件修改父组件的几种方式,兄弟组件状态修改

我想要实现的功能,是点击子类中的一个按钮,在父类中弹出一个MODAL。要求是:在单击子类按钮的时候,需要向父类传参,告诉父类单击的是哪个按钮,根据按钮的不同,显示不同的modal。使用组件DeviceEventEmitter实现传参。

1.在父类和子类中都需要导入DeviceEventEmitter组件:

import {View,Text,Button,DeviceEventEmitter}from 'react-native';

2.在子类中写一个发送消息的方法:

<Button title="发送通知" onPress={() => {DeviceEventEmitter.emit('left','发送了个通知');}}/>

3.在父类中写一个接收这个消息的方法:

在didmount方法中写好监听/接收方法,当有消息发送时,这就会接收到,并执行相应方法:

componentDidMount() {this.deEmitter =DeviceEventEmitter.addListener('left', (a) => { alert('收到通知:' + a); });}

4.最后在父类中,需要卸载监听:

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

相关文章

  • react native 页面跳转传参

    react native 组件之间传参包括父传子和子传父,但是也有页面跳转时需要传参,比如从A页面跳转到B页面...

  • vue、react对比

    一、父子通信 1. 父组件通过props向子组件传值 vue:父组件 子组件接收 react:父组件: 子组件: ...

  • react-父子组件间通信

    React-父子组件间通信 父组件传 值 给子组件, 传 方法 给子组件 子组件接收 值 ,触发父组件的 方法

  • react native父组件和子组件通信(传参)

    参考:React-Native 发送和接收事件DeviceEventEmitter 005-React-...

  • ReactNative组件间的通信

    父组件向子组件通信 父组件向子组件传值 父组件向子组件传递方法 子组件向父组件通信 子组件向父组件传值 子组件向父...

  • 小程序父子组件传参

    1父组件向子组件传参 2子向父组件传参

  • 使用ts搭建一个react class组件

    在父组件中给子组件传参在父组件中引入子组件,然后直接传入参数,子组件通过React.Component ,它里面的...

  • 02.1 - vue 组件间传参 props

    一、用法 父组件、子组件概念: 二、父组件传参给子组件 - props 1、传静态数据 1、父组件传参 2、子组...

  • React-组件之间的通信

    在开发过程中,经常会遇到父组件和子组件之间相互通信,React子组件和父组件通信包括以下几个方面: 子组件向父组件...

  • React组件通信

    1.父组件与子组件通信父组件传值到子组件props。2.子组件与父组件通信父组件向子组件传一个函数,子组件将自己的...

网友评论

      本文标题:react native父组件和子组件通信(传参)

      本文链接:https://www.haomeiwen.com/subject/ryolpftx.html