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. hibernate4学习

    1. 安装hibernatetools插件 2. 这个是篇测试文档 来自为知笔记(Wiz)

  2. 02第一个OC程序

    一.打开XCode4.6.3,新建项目 二.选择Application下的命名行项目 三.输入项目名称,选择Foundation框架创建项目,点击Next 四.二话不说.点击Run.启动我们创建的项目 ...

  3. Maven 入门 （1）—— 安装

    Maven 入门 (1)—— 安装 http://blog.csdn.net/kakashi8841/article/details/17371837 1.下载maven安装包 http://mave ...

  4. Lua手动编译姿势

    LUA-5.3.3.tar.gz Lua源码+链接2016年5月30日更新 手动编译姿势: 已经装有VS2010 使用VS自带的 cl.exe以及 VS命令簿 打开文件地址 运行自己的bat文件 my ...

  5. BZOJ 4582: [Usaco2016 Open]Diamond Collector

    Descrirption 给你一个长度为 \(n\) 的序列,求将它分成两个序列后最多个数,每个序列最大值最小值不能超过 \(k\) Sol 二分+DP. 排一下序,找出以这个点结尾和开始的位置. 这 ...

  6. Python自动化之django URL

    URL url(r'^detail-(?P<nid>\d+)-(?P<uid>\d+).html', views.detail) 会把(?P\d+)和(?P\d+)传到后台 需 ...

  7. SVN 删除误上传到服务器的文件

    使用Axure软件的时候,不小心把一些无用的文档也提交到了SVN上了. 当更新服务器上的文件到本地,然后删除误提交的文件时,出现了一个错误,见下图:   错误:cannot verify lock o ...

  8. 分享一些不错的sql语句

    1.说明:复制表(只复制结构,源表名:a   新表名:b)   (Access可用)  法一:select   *   into   b   from   a   where   1 <> ...

  9. jquery返回滚动条顶部

    var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...

  10. iOS中关于NavigationController中preferredStatusBarStyle一直不执行的问题

    重点:真的能改吗?跑起来毛用没有. 1.还要在plist文件里把View controller-based status bar appearance设置成YES. 2.一定要写UINavigatio ...