react(二):组件的通信
对于组件来说,通信无非两种,父子组件通信,和非父子组件通信
一、父子父子组件通信
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(二):组件的通信的更多相关文章
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React中组件之间通信的方式
一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- react 嵌套组件的通信
在react中经常会用到的组件嵌套,如下: 图中 parent本身是一个自定义的组件,然后内部又加入了 child的自定义组件,那么这种情况,父子之间如何通信 react中在父组件里面有一个 this ...
- react 父子组件互相通信
1,父组件向子组件传递 在引用子组件的时候传递,相当于一个属性,例如: class Parent extends Component{ state = { msg: 'start' }; render ...
随机推荐
- JUnit 判断方法抛出的异常
:比方案1更详细,可以进一步判断抛出的异常的报错信息是否符合预期 不用上面那个属性,用 try - catch(因为判断了报错信息,所以不用判断异常的类型了吧) ( 注释:MyAssert类是我自定义 ...
- 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法
现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...
- (转)DNS解析过程详解
DNS解析过程详解 原文:http://blog.csdn.net/crazw/article/details/8986504 先说一下DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的 ...
- 远程调用历史及代码编写demo
历史介绍部分: 远程调用大致经过了corba.webservice.二进制跟restful四个阶段 corba时代,corba(Common Object Request Broker Archite ...
- [PHP]Mysql的运用
1.创建数据库和表,代码如下: //创建数据库函数 function createDB($DBname){ $query="CREATE DATABASE $DBname"; re ...
- sqlldr 采集中文数据乱码问题
测试机上装入数据 发现中文字段全部变成???????,初步判断为字符集问题 更改 UPDATE sys.props$ SET VALUE$='WE8ISO8859P1' ...
- NET平台4.0 发布网站流程及出错总结
1.进入IIS设置,在控制面板中选择“管理工具”,进入后选择 “Internet 信息服务(IIS)管理器” 2.点击[添加]应用程序池,根据版本选择framework 3.添加网站 ,右击网站,添加 ...
- DIV+CSS如何让图片和文字在同一行!
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- NIM(1) 一排石头的游戏
最近在实习面试过程中,一个朋友遇到了该问题,从简单到复杂的思路如下,希望能给遇到相同问题的朋友一些启发和帮助.(内容来源网络和<编程之美>) 1.问题1 100个苹果 桌上有100个苹果, ...
- 选择、循环与函数结构:MATLAB VS Python
选择.循环与函数结构:MATLAB VS Python 整理基本的程序控制结构,主要是选择 和 循环. 1.MATLAB选择结构 (1)单分支if语句格式: if 条件 语句组 end (2)双分支i ...