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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 关于war包 jar包 ear包 及打包方法
关于war包 jar包 ear包 及打包方法 war包:是做好一个web应用后,通常是网站打成包部署到容器中 jar包:通常是开发的时候要引用的通用类,打成包便于存放管理. ear包:企业级应用 通常 ...
- UIScrollView和delegate的通信
在OC中,发送消息的意思就是调用方法 因此UIScrollView和delegate的通信可以理解为下图所示 再精确一点,UIScrollView和delegate的通信应该为下图所示 可以看出,要想 ...
- 第2月第5天 arc invocation getReturnValue
http://blog.csdn.net/zengconggen/article/details/38024625
- ecshop后台增加|添加商店设置选项和使用方法详解
有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...
- espcms联动筛选功能开发
易思后台增加新内容模型,添加字段yewu,fuwu,leixing 修改/interface/article.php (写上新增内容模型的mid——写死的),对这个模型的内容列表写了可以联动筛选的sq ...
- git workflow
1) fork map-matcher.git repo 2) add ssh-keygen public key to gitlab 3) clone repo git clone git@git. ...
- WIN7下VS2008生成Detours3.0
Detours是微软开发的一个函数库,可用于捕获系统API.在用其进行程序开发之前,得做一些准备工作: 一.下载Detours 在http://research.microsoft.com ...
- cf593c
题意:有n(n<=50)个圆,给出每个圆的圆心坐标和半径r(r>=2). 求两个函数f(t),g(t),t的取值为0到50的整数,每次令x=f(t),y=g(t),产生一个51个点的集合. ...
- loadrunner11录制无法打开IE浏览器
安装loadrunner折腾了很久,后来发现是ghost系统问题.重装了系统,再重装了自己需要用的工具~ 接着学习loadrunner,一边看帮助文档一遍学.可是为嘛按照帮助文档的步骤来,就是会碰到一 ...
- SQL实现表名更改，列名更改，约束更改
修改表名 格式:sp_rename tablename,newtablename sp_rename tablename,newtablename 修改字段名 格式:sp_rename 'tablen ...