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. UIScrollView无法滚动的解决办法

    如果UIScrollView无法滚动,可能是以下原因: 没有设置contentSize scrollEnabled = NO 没有接收到触摸事件:userInteractionEnabled = NO ...

  2. 如何修改 Total commander 配置文件的路径

    在官方主页 http://www.ghisler.com/tools.htm#other 上提供了一个名为 INIreloc.exe  的小程序,它可以变更ini文件的保存位置.

  3. PHP大数（浮点数）取余

    一般我们进行取余运算第一个想到的就是用百分号%,但当除数是个很大的数值,超出了int范围时,这样取余就不准确了. php大数(浮点数)取余函数 /** * php大数取余 * * @param int ...

  4. ubuntu配置 Java SE 1.6

    今天编译android 4.0时提示如下错误:   You are attempting to build with the incorrect version of java. Your versi ...

  5. 巧用dimens适配多个分辨率

      让应用自动适配多个分辨率的屏幕,是每个android程序员的基本功,就好像前端工程师熟练编写CSS Hack一样.适配工作中一个重要的工作就是对页面的调整. 对于页面的适配,有很多的方法和技巧.比 ...

  6. 【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别

    From the previous posts, I have analysed 4 different Docker multi-host network solutions - Calico, F ...

  7. AngularJS 初用总结

    一直用惯jquery,初用Angularjs的初段时间,需要先了解一下她的类MVC思想. 初学时几个比较基本的概念: 1.客户端模板 2. Model View Controller (MVC) 3. ...

  8. 关于js实现分页效果的简单代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. JS中创建函数的三种方式及区别

    1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2 ...

  10. Linux虚拟机添加新硬盘的全程图解

    查看网的文章,我将在vm虚拟机LinuxRedhat中添加一个新的硬盘, 过程大致如下: 1.选择"VM"----"setting"并打开,将光标定位在hard ...