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独立组件间通信联动的更多相关文章

  1. React的组件间通信

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

  2. React Native组件间通信

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

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

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

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

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

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

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

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

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

  7. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  8. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  9. react系列（三）组件间通信

    组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...

随机推荐

  1. [Java] jackson注解

    Jackson(http://jackson.codehaus.org)库是基于java语言的开源json格式解析工具.相对于javajson解析的其他库,诸如json-lib.gson包,Jacks ...

  2. JSP入门

    JSP简介 所谓JSP就是在网页文件中嵌入Java代码或JSP定义的一些标记.JSP是建立在Servlet上的,在执行时JSP容器会先将JSP文件转换成Servlet文件以及class 文件,然后再执 ...

  3. MySQL 的 find_in_set 函数使用方法

    举个例子来说: 有个文章表里面有个type字段,它存储的是文章类型,有 1头条.2推荐.3热点.4图文...1,12,13 等等 . 现在有篇文章他既是 头条,又是热点,还是图文, type中以 1, ...

  4. Put-Me-Down项目Postmortem2

    一.设想和目标 二.计划 三.资源 四.变更管理 五.设计/实现 六.测试/发布 总结 一.设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的 ...

  5. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  6. socket阻塞与非阻塞，同步与异步、I/O模型，select与poll、epoll比较

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步/异步主要针对C端: 同步:      所谓同步,就 ...

  7. poj1001_Exponentiation_java高精度

    Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 162918   Accepted: 39554 ...

  8. 源码编译安装mysql

    1       概述 首先来看下mysql的下载地址: http://ftp.plusline.de/mysql/Downloads/ 这里有mysql的各种版本 操作系统:CentOS releas ...

  9. BlockingQueue使用

    import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import ja ...

  10. 优雅的数组降维——Javascript中apply方法的妙用

    将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性实现更为简洁优雅的转换.本文将从朴素的循环转换开始,逐一介绍三 ...