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. 原生JavaScript技巧

    时常在技术论坛有看见一些比较好的示例,于是就出于一种收集并学习的态度,于是就保留下来啦~  当然现在展示的也只是一部分,先放一部分出来尝尝鲜~~~

  2. 还原MySql数据库失败：max_allowed_packet 设置过小导致记录写入失败

    MySQL根据配置文件会限制Server接受的数据包大小. 有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置 show VARIABLES ...

  3. 知识联结梳理 ： I/O多路复用、EPOLL（SELECT/POLL）、NIO、Event-driven、Reactor模式

    为了形成一个完整清晰的认识,将概念和关系梳理出来,把坑填平. I/O多路复用 I/O多路复用主要解决传统I/O单线程阻塞的问题.它通过单线程管理多个FD,当监听的FD有状态变化的时候的,调用回调函数, ...

  4. git 简单使用

    创建新分支:git branch branchName 切换到新分支:git checkout branchName 然后 ,上面两个命令也可以合成为一个命令: git checkout -b bra ...

  5. [BZOJ2391]Cirno的忧郁

    [BZOJ2391]Cirno的忧郁 试题描述 Cirno闲着无事的时候喜欢冰冻青蛙. Cirno每次从雾之湖中固定的n个结点中选出一些点构成一个简单多边形,Cirno运用自己的能力能将此多边形内所有 ...

  6. linux安装wine

    1.添加PPA sudo add-apt-repository ppa:ubuntu-wine/ppa 2.更新列表 sudo apt-get update 3.安装Wine sudo apt-get ...

  7. springMVC配置Json

    步骤1:将json包引入工程中,分别是:jackson-annotations-2.7.0.jar,jackson-core-2.7.0.jar,jackson-databind-2.7.0.jar ...

  8. node05-fs

    目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...

  9. Spring+SpringMvc+Mybatis框架集成搭建教程四(项目部署及测试)

    在IDEA中将项目部署到本地Tomcat下进行运行并验证整合结果 (1).点击如下图所示的下拉按钮,弹出Edit Configurations...后点击该项. (2).跳出如下界面后,点击红框内的& ...

  10. django上传图片

    django修改头像的功能... 1.在表单中加入enctype="multipart/form-data: 关于表单中enctype的介绍:http://www.w3school.com. ...