对于组件来说,通信无非两种,父子组件通信,和非父子组件通信

一、父子父子组件通信

  1、父组件给子组件传值

  对于父组件来说,props是他们之间的媒介

class Parent extends Component{
state = {
msg: 'start'
}; componentDidMount() {
setTimeout(() => {
this.setState({
msg: 'end'
});
}, 1000);
} render() {
return <Child_1 msg={this.state.msg} />;
}
} class Child_1 extends Component{
render() {
return <p>{this.props.msg}</p>
}
}

子组件通过接受父组件的props来获取父组件中的数据

  2、子组件给父组件传值

  途径是先在父组件中注册一个回调函数,子组件通过props获取到这一回调函数并执行

  

class Parent extends Component{
state = {
msg: 'start'
}; transferMsg(msg) {
this.setState({
msg
});
} render() {
return <div>
<p>child msg: {this.state.msg}</p>
<Child_1 transferMsg = {msg => this.transferMsg(msg)} />
</div>;
}
} class Child_1 extends Component{
componentDidMount() {
setTimeout(() => {
this.props.transferMsg('end')
}, 1000);
} render() {
return <div>
<p>child_1 component</p>
</div>
}
}

  这样在子组件中用传参的方式,获取到子组件中的数据,进而改变了父组件的状态

  3、祖先组件给后代组件(就是组件之间的嵌套已经超过一层)

  这样的话也还可以通过props来传值,但是一层一层的传有点麻烦,我们可以使用... 运算符(三个点是es6里面的剩余展开属性),以更简洁的方式传递给更深层级的子组件。通过这种方式,不用考虑性能的问题,通过 babel 转义后的 ... 运算符 性能和原生的一致

class Child_1 extends Component{
render() {
return <div>
<p>{this.props.msg}</p>
<Child_1_1 {...this.props}/>
</div>
}
} class Child_1_1 extends Component{
render() {
return <p>{this.props.msg}</p>
}
}

二、非父子组件之间的传值

  对于非父子组件来说缺少连接的纽带,很难通过props联系到一起(要是不是很远的话也能用,但是要是过深就特别麻烦),但是我们可以使用全局的一些机制来实现,比如react提供了一种上下文机制

class Brother1 extends React.Component{
constructor(props){
super(props);
this.state = {}
} render(){ return (
<div>
<button onClick={this.context.refresh}>
更新兄弟组件
</button>
</div>
)
}
}
Brother1.contextTypes = {
refresh: React.PropTypes.any
}

class Brother2 extends React.Component{
constructor(props){
super(props);
this.state = {}
} render(){
return (
<div>
{this.context.text || "兄弟组件未更新"}
</div>
)
}
}
Brother2.contextTypes = {
text: React.PropTypes.any
}

class Parent extends React.Component{
constructor(props){
super(props);
this.state = {}
} getChildContext(){
return {
refresh: this.refresh(),
text: this.state.text,
}
} refresh(){
return (e)=>{
this.setState({
text: "兄弟组件沟通成功",
})
}
}
render(){
return (
<div>
<h2>兄弟组件沟通</h2>
<Brother1 />
<Brother2 text={this.state.text}/>
</div>
)
}
}
Parent.childContextTypes = {
refresh: React.PropTypes.any,
text: React.PropTypes.any,
}

使用方法

使用getChildContext方法将属性传递给子组件,并使用childContextTypes声明传递数据类型,子组件中需要显式地使用contextTypes声明需要用到的属性的数据类型。

需要传递进context参数才可以在constructor方法中使用context,要不然React将会报错。

在组件中,通过this.context访问context中的属性或方法。

未完待续。。。

关于组件之间的通信还有更好的方式,比如说用redux来管理数据流,之后单独整理关于redux的部分。

react(二):组件的通信的更多相关文章

  1. React的组件间通信

    一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...

  2. React Native组件间通信

    React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...

  3. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

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

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

  5. React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...

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

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

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

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

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

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

  9. react 嵌套组件的通信

    在react中经常会用到的组件嵌套,如下: 图中 parent本身是一个自定义的组件,然后内部又加入了 child的自定义组件,那么这种情况,父子之间如何通信 react中在父组件里面有一个 this ...

  10. react 父子组件互相通信

    1,父组件向子组件传递 在引用子组件的时候传递,相当于一个属性,例如: class Parent extends Component{ state = { msg: 'start' }; render ...

随机推荐

  1. JUnit 判断方法抛出的异常

    :比方案1更详细,可以进一步判断抛出的异常的报错信息是否符合预期 不用上面那个属性,用 try - catch(因为判断了报错信息,所以不用判断异常的类型了吧) ( 注释:MyAssert类是我自定义 ...

  2. 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

    现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...

  3. (转)DNS解析过程详解

    DNS解析过程详解 原文:http://blog.csdn.net/crazw/article/details/8986504 先说一下DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的 ...

  4. 远程调用历史及代码编写demo

    历史介绍部分: 远程调用大致经过了corba.webservice.二进制跟restful四个阶段 corba时代,corba(Common Object Request Broker Archite ...

  5. [PHP]Mysql的运用

    1.创建数据库和表,代码如下: //创建数据库函数 function createDB($DBname){ $query="CREATE DATABASE $DBname"; re ...

  6. sqlldr 采集中文数据乱码问题

    测试机上装入数据 发现中文字段全部变成???????,初步判断为字符集问题    更改      UPDATE sys.props$      SET VALUE$='WE8ISO8859P1'    ...

  7. NET平台4.0 发布网站流程及出错总结

    1.进入IIS设置,在控制面板中选择“管理工具”,进入后选择 “Internet 信息服务(IIS)管理器” 2.点击[添加]应用程序池,根据版本选择framework 3.添加网站 ,右击网站,添加 ...

  8. DIV+CSS如何让图片和文字在同一行!

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  9. NIM(1) 一排石头的游戏

    最近在实习面试过程中,一个朋友遇到了该问题,从简单到复杂的思路如下,希望能给遇到相同问题的朋友一些启发和帮助.(内容来源网络和<编程之美>) 1.问题1 100个苹果 桌上有100个苹果, ...

  10. 选择、循环与函数结构:MATLAB VS Python

    选择.循环与函数结构:MATLAB VS Python 整理基本的程序控制结构,主要是选择 和 循环. 1.MATLAB选择结构 (1)单分支if语句格式: if 条件 语句组 end (2)双分支i ...