React独立组件间通信联动
React是现在主流的高效的前端框架，其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法，而没有给出独立组件间通信的解决方案。这里我介绍一种不错的实现方式——signals.
第一步，我们要建立两个简单的react组件——一个进度条和一个输入框。
组件——进度条：
var ProcessBar=React.createClass({
getInitialState:function(){
return {
initValue:0, //初始值
endValue:0, //终值
totalValue:100 , //总值
};
},
render:function(){
var barStyle={
width:this.getPer(),
};
return(
<div className="progress">
<div className="progress-bar" style={barStyle}>{this.getPer()}</div>
</div>
);
}
});
这个进度条的实现依赖于Bootstrp的进度条组件样式及特效，可以移步：http://v3.bootcss.com/components/#progress 查看。
组件——input框：
var Input=React.createClass({
getEndValue:function(){
var curValue=this.refs.endValue.value;
if(curValue <= 0) curValue=0;
if(curValue >=100) curValue=100;
},
render:function(){
return (
<div>
<input type="text" ref="endValue" placeholder="请输入值" onChange={this.getEndValue}/>
</div>
);
}
});
两个独立的简单的组件已经完成了，下面就来看看如何使它们可以紧密联系，当input框中的值变化时，进度条可以实时变化。
在此，你可以借鉴另一篇博客了解解决独立组件间通信的几种策略——http://www.tuicool.com/articles/AzQzEbq。
这里，我主要介绍signals解决的方案。我们简单看下signals的github上的介绍：http://millermedeiros.github.io/js-signals/，看它给出的应用基本实例：
//custom object that dispatch a `started` signal
var myObject = {
started : new signals.Signal()
};
function onStarted(param1, param2){
alert(param1 + param2);
}
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
myObject.started.add(onStarted); //add listener
myObject.started.remove(onStarted); //remove a single listener
我们会发现，signals应用很简单，步骤为：
1：先创建一个signals.Signal的实例对象。
2：该对象通过dispatch()方法发布数据。
3：该实例对象提供add(function(data){})方法监听到数据,data默认为发布的数据。
4：如果需要，可以通过remove()关闭连接。
这里要提一下，就是因为发布和监听只能建立一个，所以我们的数据可以集中为一个数据对象，这样就可以大量传递数据了。
好，现在我们来应用到我们的组件中看看能不能解决我们的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>processBar</title>
<link rel="stylesheet" href="../../public/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="../../public/css/bootstrap.min.css"/>
<script src="../../public/js/react-0.14.0.js"></script>
<script src="../../public/js/react-dom-0.14.0.js"></script>
<script src="../../public/js/jquery.js"></script>
<script src="../../public/js/browser.min.js"></script>
<script src="../../public/js/signals.js"></script>
<script src="../../public/js/bootstrap.min.js"></script>
<style>
#exm{margin:20px auto;height:100px;border:1px solid #000;}
.progress-bar{width:60%;}
</style>
</head>
<body>
<div id="exm"></div>
<div id="exm2"></div>
<script type="text/babel">
//设置数据广播
var broadData=new signals.Signal(); //全局数据广播对象
var datas={}; //总数据对象
var ProcessBar=React.createClass({
getInitialState:function(){
return {
initValue:0, //初始值
endValue:0, //终值
totalValue:100 , //总值
};
},
getPer:function(){
var that=this;
broadData.add(function(data){ //收听到数据
that.setState({
endValue:data.curValue,
});
});
var per=(this.state.endValue-this.state.initValue)/this.state.totalValue *100+"%";
return per;
},
render:function(){
var barStyle={
width:this.getPer(),
};
return(
<div className="progress">
<div className="progress-bar" style={barStyle}>{this.getPer()}</div> </div>
);
}
}); //输入框
var Input=React.createClass({ getEndValue:function(){
var curValue=this.refs.endValue.value;
if(curValue <= 0) curValue=0;
if(curValue >=100) curValue=100;
datas.curValue=curValue; //将curValue放入总数居对象
broadData.dispatch(datas); //发布数据 },
render:function(){ return (
<div>
<input type="text" ref="endValue" placeholder="请输入值" onChange={this.getEndValue}/>
</div>
);
}
}); ReactDOM.render( //input框要先于进度条渲染
<Input/>,
document.getElementById("exm2")
); ReactDOM.render(
<ProcessBar/>,
document.getElementById("exm")
); </script>
</body>
</html>
我们的代码效果如下：
我们的问题得到了解决！
所有代码可以在github上下载——https://github.com/Johnharvy/React-components-combo。
如果以上内容对您有所帮助，请帮我点个推荐吧，传播整理知识，有利你我。
React独立组件间通信联动的更多相关文章
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- react系列（三）组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- python 学习 ： 一个简单的秒表
游戏说明:绿色数字(左边表示成功停止在整秒的次数,右边表示停止的总次数) 点击stop,如果小数点后为0,即你停止的时间是整秒数,右上方斜杠左边数字加一 把代码复制到这个网页code run he ...
- PHP数组函数： array_map()
定义和用法 array_map() 函数返回用户自定义函数作用后的数组.回调函数接受的参数数目应该和传递给 array_map() 函数的数组数目一致. 语法 array_map(function,a ...
- PF_INET 和 AF_INET 的区别
在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0); 然后再绑定本地地址或连接远程地址时需要初始化sockaddr_in结构, ...
- 关于Azure带宽的测试
以前见客户经常会碰到一些客户问我们你们Azure的带宽是多少,每次回答这个问题我们只能含糊地告诉客户一个大概数值,这样就会留给客户一个认为我们很不专业的印象,其实站在客户的角度我们也能理解,连这样的一 ...
- HahsRouter hash 路由
无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服. 最近用vue,看到vue-route的路由,做单页应用切换视图真心易如反掌,分分钟爽到不行.为了加深理解其内涵原 ...
- iOS开发——高级篇——iOS中如何选择delegate、通知、KVO（以及三者的区别）
在开发IOS应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,controllers[B]怎么进行通信.在IOS应用不断的出现三种模式来实现这种通信:1委托delegation2通知 ...
- Mysql数据库的使用总结之Innodb简介(一)
最近在对开发的软件的服务器部分制作安装包,但服务器部分需要有mysql数据库的支持.因此,采用免安装版的mysql策略:将mysql数据库需要的文件在安装程序中进行设置和打包即可.但也遇到了很多 ...
- CentOS 默认进入图形界面与文本界面
查看/etc/inittab文件,得到以下信息: # inittab is no longer used when using systemd.## ADDING CONFIGURATION HERE ...
- OSG透明代码
//关闭灯光 state->setMode(GL_LIGHTING,osg::StateAttribute::OFF|osg::StateAttribute::PROTECTED); //打开混 ...
- Java enum的用法详解[转]
Ref:http://www.cnblogs.com/happyPawpaw/archive/2013/04/09/3009553.html 用法一:常量 在JDK1.5 之前,我们定义常量都是: p ...