React 中组件间通信的几种方式

brianway 发布于2019-08-23 12:18 / 581人阅读

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。

在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：

父组件向子组件通信

子组件向父组件通信

非嵌套组件间通信

跨级组件之间通信

1.父组件向子组件通信
父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。
演示代码：
父组件 parent.js：

import React,{ Component } from "react";

export default class App extends Component{

    render(){
        return(
            
                
        )
    }
}
子组件 child.js：

import React from "react";

class Child extends React.component{

construtor(props){
 super(props)
 this.state = {}
}
render(){
    return(
        
            { props.title}
        
    )
}

}

export default Child;

**2.子组件向父组件通信**
利用回调函数，实现子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数.即可
演示代码：
child.js

import React from "react";

class Child extends React.component{

construtor(props){
 super(props)
 this.state = {}
}
cb = (msg) => {
  this.props.callback(msg);
}
render(){
    return(
         
            
        
    )
}

}

export default Child;

app.js

import React from "react";

export default class App extends React.Component{

callback(msg){
    console.log(msg);
}
render(){
    return(
        
            
    )
}

}

**3.非嵌套组件间通信**
非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件
首先需要引入一个包events

npm install events --save

新建ev.js文件，引入 events 包，并向外提供一个事件对象，供通信时使用

import { EventEmitter } from "events";
export default new EventEmitter();

app.js

import React, { Component } from "react";

import childA from "./childA ";
import childB from "./childB";

export default class App extends Component{

render(){
    return(
        
            
            
        
    );
}

}

childA

import React,{ Component } from "react";
import emitter from "./ev"

export default class ChildA extends Component{

constructor(props) {
    super(props);
    this.state = {
        msg:null,
    };
}
componentDidMount(){
    // 声明一个自定义事件
    // 在组件装载完成以后
    this.eventEmitter = emitter.addListener("callMe",(msg)=>{
        this.setState({
            msg
        })
    });
}
// 组件销毁前移除事件监听
componentWillUnmount(){
    emitter.removeListener(this.eventEmitter);
}
render(){
    return(
        
            { this.state.msg }
            child a
        
    );
}

}

childB:

import React,{ Component } from "react";
import emitter from "./ev"

export default class ChildB extends Component{

render(){
    const cb = (msg) => {
        return () => {
            // 触发自定义事件
            emitter.emit("callMe","test")
        }
    }
    return(
        
            childB
            
        
    );
}

}

GPU云服务器云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98273.html

React 中组件间通信的几种方式

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨...

Anshiii 2019-07-01 10:49 评论0 收藏0
React中组件通信的几种方式

摘要：首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信父组件向子组件通信数据流动是单向的父组件向子组件通信也是最常见的父组件通过向子组件传递需要的信息子组件向父组件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 评论0 收藏0
React 组件之间的通讯

摘要：父组件声明自己支持父组件提供一个函数，用来返回相应的对象子组件声明自己需要使用我胡汉三又回来了点击我如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信跨级组件之间...

dongxiawu 2019-08-23 16:59 评论0 收藏0
我学react之父子组件通信

摘要：父子组件通信父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信由于是单向数据流向的，父组件一般通过向子组件传递相关的一些信息来看一下下面这个例子，在这里我封装了一个组件，它的显示与取消的状态交 react父子组件通信 react父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信...

wwolf 2019-08-23 15:38 评论0 收藏0
聊聊Vue.js组件间通信的几种姿势

摘要：子组件向父组件通信方法一使用事件父组件向子组件传递事件方法，子组件通过触发事件，回调给父组件。非父子组件兄弟组件之间的数据传递非父子组件通信，官方推荐使用一个实例作为中央事件总线。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 评论0 收藏0