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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- ASP.NET 系统对象 Request（一）
Request对象 用来获取客户端在请求一个页面或传送一个Form是提供的所有信息.它包括用户的HTTP变量.能够识别的浏览器.存储客户端的Cookie信息和请求地址等. Request对象是Syst ...
- bowtie1和bowtie2的比较
1.对于长度大于50bp的reads,bowtie2更精确:而小于50bp的reads,bowtie1更精确更快速 2.bowtie2支持的reads长度没有上限,当然reads长度在50~1000b ...
- css content 的 attr 用法 （实现悬浮提示）
content 的attr 实现 鼠标悬浮 显示 悬浮提示, content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 方法/步骤 1 <div> < ...
- 如何在网页中嵌套其他的HTML文件
html文件引入其它html文件的方法有三种,具体可以看下:1.IFrame引入,看看下面的代码 <IFRAME NAME="content_frame" width=100 ...
- GDI+中发生一般性错误的解决办法
这个错误经常发生,代码如下: private static byte[] GetBytes (Image image) { try { if (image == null) return null ...
- python file
>>> help(open) Help on built-in function open in module __builtin__: open(...) open(name[, ...
- 开源实时日志分析ELK平台部署
参考帖子: (1)自动化测试Web服务器性能autobench+httperf
- Python:如何删除文件中的空白行？
def delblankline(infile,outfile): infopen = open(infile,'r') outfopen = open(outfile,'w') lines = in ...
- HDU 4113 Construct the Great Wall（插头dp）
好久没做插头dp的样子,一开始以为这题是插头,状压,插头,状压,插头,状压,插头,状压,无限对又错. 昨天看到的这题. 百度之后发现没有人发题解,hust也没,hdu也没discuss...在acm- ...
- Ionic常用命令行解释
原文链接 安装ionic npm install -g ionic 更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower update ionic, 否则则会从C ...