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

来源：互联网发布：淘宝上的组装机能买吗编辑：程序博客网时间：2024/05/24 04:26

子组件修改父组件的状态，在开发中非常常见，下面列举了几种方式。
DeviceEventEmitter可以跨组件，跨页面进行数据传递，还有一些状态的修改。http://www.jianshu.com/p/c6991a241b4f

兄弟组件可以进行修改，所谓兄弟组件，就是说同一个页面，有两个组件，组件A，组件B，组件A的状态的变化，可以导致组件B的状态变化，有两种方式。第一种，使用DeviceEventEmitter跨组件通信。第二种，在页面内定义一个State，组件A，使用props属性引入，操作组件A，修改页面内的State，然后，组件B，也是引入页面内的State，所有，当组件A状态变化时，修改页面的State,重新Render，然后，更新组件B，组件B进行Render。

msg.gif

二： Coding
新建三个组件：分别为PostCallMsgAndMsg，PostCallMsg，PostMsg；
在Msg进行使用。

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    DeviceEventEmitter} from 'react-native';import PostMsg from './PostMsg'import PostCallMsg from './PostCallMsg'import PostCallMsgAndMsg from './PostCallMsgAndMsg'export default class Msg extends Component {    constructor(props){        super(props);        this.state={            listenerMsg:'listenerMsg',            callMsg:'callMsg',            callMsgAndMsg:'callMsgAndMsg'        }    }    componentDidMount() {        //注意addListener的key和emit的key保持一致        this.msgListener = DeviceEventEmitter.addListener('Msg',(listenerMsg) => {            this.setState({                listenerMsg:listenerMsg,            })        });    }    componentWillUnmount() {        //此生命周期内，去掉监听        this.msgListener&&this.msgListener.remove();    }    render() {        return (            <View style={styles.container}>                    <Text>第一种方式  DeviceEventEmitter：</Text>                    <Text>{this.state.listenerMsg}</Text>                    <PostMsg  />                    <Text>第二种方式  CallBack：</Text>                    <Text>{this.state.callMsg}</Text>                    <PostCallMsg  onChangeMsg={                        this.onMsgByCall                    }/>                    <Text>第三种方式  CallBack有参数：</Text>                    <Text>{this.state.callMsgAndMsg}</Text>                    <PostCallMsgAndMsg  onChangeMsg={(msg)=>{                        this.onMsgByCallAndMsg(msg)                    } }/>            </View>        );    }    onMsgByCall=()=>{        this.setState({            callMsg:'通过CallBack修改父组件状态值'        })    }    onMsgByCallAndMsg=(msg)=>{        this.setState({            callMsgAndMsg:msg        })    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems:'center',    },});

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,} from 'react-native';export default class PostCallMsgAndMsg extends Component {    render() {        return (            <View style={styles.container}>                <View style={styles.viewLine}/>                <TouchableOpacity onPress={this._postMsgByCallBack}>                    <Text>PostCallMsgAndMsg</Text>                </TouchableOpacity>            </View>        );    }    _postMsgByCallBack=()=>{        if(this.props.onChangeMsg){            this.props.onChangeMsg('通过PostCallMsgAndMsg来传递属性');        }    }}const styles = StyleSheet.create({    container: {        justifyContent: 'center',        alignItems: 'center',        marginBottom:20,    },});

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,} from 'react-native';export default class PostCallMsg extends Component {    render() {        return (            <View style={styles.container}>                <View style={styles.viewLine}/>                <TouchableOpacity onPress={this._postMsgByCallBack}>                    <Text>Callback</Text>                </TouchableOpacity>            </View>        );    }    _postMsgByCallBack=()=>{        if(this.props.onChangeMsg){            this.props.onChangeMsg();        }    }}const styles = StyleSheet.create({    container: {        justifyContent: 'center',        alignItems: 'center',        marginBottom:20,    },});

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    DeviceEventEmitter,} from 'react-native';export default class PostMsg extends Component {    render() {        return (            <View style={styles.container}>                <TouchableOpacity onPress={this._postMsgByListener}>                    <Text>DeviceEventEmitter</Text>                </TouchableOpacity>            </View>        );    }    _postMsgByListener=()=>{        DeviceEventEmitter.emit('Msg','此消息来自于子组件，DeviceEventEmitter父组件进行修改和状态变化');    }}const styles = StyleSheet.create({    container: {        justifyContent: 'center',        alignItems: 'center',        marginBottom:20,    },});

阅读全文

0 0