组件间通信

5.1.1. 方式一: 通过props传递

1)         共同的数据放在父组件上, 特有的数据放在自己组件内部(state)

2)         通过props可以传递一般数据和函数数据, 只能一层一层传递

3)         一般数据-->父组件传递数据给子组件-->子组件读取数据

4)         函数数据-->子组件传递数据给父组件-->子组件调用函数

5.1.2. 方式二: 使用消息订阅(subscribe)-发布(publish)机制

1)         工具库: PubSubJS

2)         下载: npm install pubsub-js --save

3)         使用:

import PubSub from 'pubsub-js' //引入

PubSub.subscribe('delete', function(data){ }); //订阅

PubSub.publish('delete', data) //发布消息

5.1.3. 方式三: redux

后面详细学习

发布订阅例子:

// 导入
import PubSub from "pubsub-js" // 在有数据的地方进行发布
class Data extends React.Component{
pubmsg = ()=>{
PubSub.publish("频道","频道发布的消息")
}
render() {
return(
<button onClick={this.pubmsg}>Data组件,发布消息</button>
)
}
} // 订阅
class App extends Component {
// 组件将要被渲染的时候进行订阅
componentWillMount() {
PubSub.subscribe("频道", (msg,data)=> {
console.log(msg,data)
})
} render() {
return (
<div className="App">
<Data />
</div>
);
}
}

React 组件间通信 总结的更多相关文章

  1. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  2. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  3. React组件间通信-sub/pub机制

    React生命周期第二个demo演示了兄弟组件的通信,需要通过父组件,比较麻烦:下面介绍sub/pub机制来事项组件间通信. 1.导包 npm i pubsub-js 2.UserSearch.jsx ...

  4. React组件间通信

    众所周知,ReactJS组件与组件之间的通信是一个难点.在React实际开发中,父子组件之间的传值是比较常见的,刚入门的小伙伴很容易被组件之间的通信绕懵. 今天花了点时间总结了一下React父子组件之 ...

  5. react 组件间通信,父子间通信

    一.父组件传值给子组件 父组件向下传值是使用了props属性,在父组件定义的子组件上定义传给子组件的名字和值,然后在子组件通过this.props.xxx调用就可以了. 二.子组件传值给父组件 子组件 ...

  6. React 组件间通信

    https://jsfiddle.net/69z2wepo/9719/ <script src="https://facebook.github.io/react/js/jsfiddl ...

  7. React独立组件间通信联动

    React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...

  8. React 精要面试题讲解(二) 组件间通信详解

    单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...

  9. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

随机推荐

  1. 图像实例分割:CenterMask

    图像实例分割:CenterMask CenterMask: single shot instance segmentation with point representation 论文链家: http ...

  2. PyTorch 进行 Neural-Transfer

    PyTorch 进行 Neural-Transfer 1.简介 本文讲解如何实现由 Leon A. Gatys,Alexander S. Ecker和Matthias Bethge提出的Neural- ...

  3. Linux下Flash-LED的处理

    Linux下Flash-LED的处理 一些LED设备提供两种模式-torch和flash.在LED子系统中,LED类(参见Linux下的LED处理)和LED Flash类,分别支持这些模式.torch ...

  4. ADAS处理器集成功能安全单片机MCU

    ADAS处理器集成功能安全单片机MCU ADAS processors integrate functional safety MCU 拉斯维加斯-德州仪器公司引进了ADAS和网关处理器TDA4VM和 ...

  5. Spring Cloud Alibaba(14)---SpringCloudAlibaba整合Sleuth

    SpringCloudAlibaba整合Sleuth 上一篇有写过Sleuth概述,Spring Cloud Alibaba(13)---Sleuth概述 这篇我们开始通过示例来演示链路追踪. 一.环 ...

  6. 用java实现一个ATM机系统(2.0版)

    用java实现一个ATM机系统(2.0版) java实现银行ATM自助取款机,实现功能:用户登录.余额查询.存钱.取钱.转账.修改密码.退出系统. 文章目录 用java实现一个ATM机系统(2.0版) ...

  7. 【NX二次开发】Block UI 角度尺寸

    属性说明 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical ...

  8. 【题解】P2854 [USACO06DEC]牛的过山车Cow Roller Coaster

    P2854 [USACO06DEC]牛的过山车Cow Roller Coaster 题目描述 The cows are building a roller coaster! They want you ...

  9. Linux 中使用 QT Charts 显示温度传感器

    前一篇笔记中实现了QT的Label控件显示CPU的温度,只能显示当前的温度,并不能反映CPU温度的变化情况,现在来实现使用QT Charts的曲线图实现一个实时曲线来显示CPU的温度. 添加对Qt C ...

  10. CCF CSP认证考试在线评测系统

    关于 CCF CSP 认证考试在线评测系统 CCF CSP 认证考试简介 CCF 是中国计算机学会的简称.CCF 计算机软件能力认证(简称 CCF CSP 认证考试)是 CCF 于 2014 年推出, ...