关于react组件之间的通信
才开始学react刚好到组件通信这一块,就简单的记录下
组件间的通信方式:父到子:props、context,子到父:自定义事件、回调,兄弟组件:共父props传递、自定义事件
import React, { Component } from 'react';
import './ChatRoom.css';
import PropTypes from "prop-types";
import emitter from '../../utils/event' // 要安装event包 cnpm install events --save //event.js为:
//import { EventEmitter } from "events";
//export default new EventEmitter();
class Test extends Component {
constructor () {
super(...arguments)
this.state={
show: true
}
this.toggle = this.toggle.bind(this)
}
static childContextTypes = {
color: PropTypes.string
}
getChildContext () {
return {
color: 'red'
}
}
toggle () {
this.setState({
show: !this.state.show
})
console.log(this.state.show)
}
render () {
class Child1 extends Component {
constructor () {
super(...arguments)
console.log(this.props)
this.state = {
show: this.props.show
}
}
componentDidMount () { // 添加事件的监听
this.eventEmitter = emitter.addListener('testEvent',(msg) => {
console.log(msg)
})
}
componentWillUnmount () { // 组件销毁前清除事件监听
emitter.removeListener(this.eventEmitter)
}
render () {
class Child2 extends Component {
constructor () {
super(...arguments)
console.log(this.props)
this.send = this.send.bind(this)
}
static contextTypes = {
color:PropTypes.string
}
send () {
emitter.emit('testEvent','send event')
}
render () {
const style = {
color: this.context.color
}
return (
<div style={style}>子子组件
<button onClick={this.send}>自定义事件</button>
</div>
)
}
}
return (
<div>
<button onClick={this.props.func}>child1</button>
{this.state.show?<div>child1list</div>:null}
<Child2></Child2>
</div>
)
}
}
return (
<div>
<button onClick={this.toggle}>toggle子集列表</button>
<Child1 show={this.state.show} func={this.toggle}></Child1>
</div>
)
}
}
export defaultTest;
这些都是简单的组件通信、复杂的通信还是要用到redux,关于redux还没开始研究,后续会继续。
关于react组件之间的通信的更多相关文章
- 使用reflux进行react组件之间的通信
前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...
- react 组件之间的通信
react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂.解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级 ...
- react组件之间的通信
通过props传递 共同的数据放在父组件上, 特有的数据放在自己组件内部(state),通过props可以传递一般数据和函数数据, 只能一层一层传递 一般数据-->父组件传递数据给子组件--&g ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- react组件之间的几种通信情况
组件之间的几种通信情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1,父组件向子组件传递 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过 ...
- react第十七单元(redux和组件之间的通信,react-redux的相关api的用法)
第十七单元(redux和组件之间的通信,react-redux的相关api的用法) #课程目标 什么是redux-redux react-redux的作用是什么 react-redux如何应用 #知识 ...
- React 组件之间通信 All in One
React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...
- react 实现组件嵌套以及子组件与父组件之间的通信
当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...
随机推荐
- 《深入理解java虚拟机》读书笔记1--java内存区域
Java内存管理 本文主要介绍Java虚拟机运行时的内存区域是如何划分的.Java对象的创建过程.Java对象的内存布局.Java对象的访问定位 一:运行时区域划分 主要可以分为以下 几个: 程序计数 ...
- 深入理解SpringCloud之配置刷新
我们知道在SpringCloud中,当配置变更时,我们通过访问http://xxxx/refresh,可以在不启动服务的情况下获取最新的配置,那么它是如何做到的呢,当我们更改数据库配置并刷新后,如何能 ...
- JavaScript怎么把对象里的数据整合进另外一个数组里
https://blog.csdn.net/qq_26222859/article/details/70331833 var json1 = [ {"guoshui":[ 3000 ...
- Angular教程测试运行过程中产生的一些问题
主要问题就是最后一个HTTP Demo需要angular-in-memory-web-api模块: TS2307:Cannot find module 'angular-in-memory-web-a ...
- Yii2快速总结
1.项目目录 后面的总结都是基于这个项目目录,注意:这个Yii2框架的basic版本原始的目录结构,未作任何更改. 2.新建控制器以及视图 controllers这个目录下的SiteControlle ...
- Vue--学习过程中遇到的坑
在这里总结一下学习Vue遇到的易错点,持续更新 1.实例化一个Vue对象: 通过new Vue({ el:'#id', data:{ a:'字符串1', b:‘字符串2’ }) 这里的Vue必须大写V ...
- hadoop环境运行程序出现 Retrying connect to server 问题
程序运行时出现如下问题: 从网上查资料,有说重启format的..有说/etc/hosts出问题的... 反正都试了一遍..还是有这个问题 后来看日志,发现问题是访问服务器9001端口访问不到..开始 ...
- Linux——浅析信号处理
信号及其处理 信号处理是Unix和LInux系统为了响应某些状况而产生的事件,通常内核产生信号,进程收到信号后采取相应的动作. 例如当我们想强制结束一个程序的时候,我们通常会给它发送一个信号,然后该进 ...
- leetCode刷题(找出数组里的两项相加等于定值)
最近被算法虐了一下,刷一下leetcode,找找存在感 如题: Given an array of integers, return indices of the two numbers such t ...
- Java程序算法设计视频分享,需要的来
每年都会有人说,IT行业饱和了,根本就找不到工作,其实,我想说的是,不是工作难找,而是你自己不够好! 前几天看到一CEO在微博上吐槽: 前几天招一算法工程师我们给了8万月薪*14+奖金,人家去阿里拿5 ...