React communication linkage between independent components

Source: Internet
Author: User

React is now the mainstream efficient front-end framework, and its official document, Http://, describes the communication between components, only the method of communication between parent and child components, There is no solution for the communication between independent components. Here I introduce a good way to implement--signals.

The first step is to create two simple react components-a progress bar and an input box. Component--progress bar:
var processbar=react.createclass ({           getinitialstate:function () {                return {                    initvalue:0,//initial value                    endvalue:0,  //FINAL value                    totalvalue:100,//value                   }            ,},            render:function () {                var barstyle={                    width : This.getper (),                };                Return (                     <div classname= "Progress" >                         <div classname= "Progress-bar" style={barstyle}>{ This.getper ()}</div>                                                 </div>                    );              }         );

The implementation of this progress bar depends on the bootstrp of the progress bar component style and effects, you can shift: view.

Component--input Box:
  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= "Please enter the value" onchange={this.getendvalue}/>                     </div>                    );}             );

Two separate, simple components have been completed, so let's see how they can be closely linked, and the progress bar can change in real time when the value in the input box changes.

Here, you can learn from another blog about several strategies for resolving communication between independent components--HTTP://WWW.TUICOOL.COM/ARTICLES/AZQZEBQ.

Here, I mainly introduce the solution of signals. Let's look briefly at signals's GitHub introduction:, look at the basic examples of applications that it gives:

Custom object that dispatch a ' started ' signalvar 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

We will find that the signals application is simple and the steps are:

1: Create a signals first. The instance object of the signal.

2: The object publishes data through the Dispatch () method.

3: The instance object provides the Add (function (data) {}) method to listen to the data, and data by default is published.

4: You can close the connection via remove () if necessary.

To mention here, because the release and monitoring can only build one, so our data can be centralized into a data object, so that the data can be transferred in large quantities.

      OK, now let's apply it to our components to see if we can solve our problem.   &NBSP;

<! DOCTYPE html>

Our code effect is as follows:

Our problem has been solved!

If the above content is helpful to you, please help me to order a recommendation, spread the knowledge, beneficial to you and me.

React communication linkage between independent components

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.