Three ways to communicate between React components (simple and easy to use)

One of the main contents of React knowledge is the communication between components. Here are several commonly used component communication methods, combined with examples, easy to understand, recommended collection.

1. Parent-child component communication

Principle: The parent component communicates with the child component through props (distinguished from the props in Vue), and the child component communicates with the parent component through callback events.

First, create a parent component Parent.js and a child component Children.js. The relationship between the two is a direct parent-child relationship.

The Parent.js parent component is as follows. It gives the parent component a default state and introduces the child component. By adding toChildren={this.state.msg} to the child component, props are passed to the child component.

import React from 'react';
import { Button } from 'element-react';
import Children from './Children';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:'Parent component passed to child component'
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  changeMsg(){
    this.setState({
      msg:'The parent component is passed to the child component (the content after the change)'
    })
  }
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>Parent-child component communication example</p>
        <Button onClick={this.changeMsg}>Father to son</Button>
        <Children toChildren={this.state.msg}></Children>
      </div>
    )
  }
}
 
export default Parent

The Children.js child component is as follows. The initial state gets the value passed from the parent component through props.

import React from 'react';
 
class Children extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:this.props.toChildren //Get the value passed by the parent component through props };
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>Passed from the parent component:</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
      </div>
    )
  }
}
 
export default Children 

Note: The value of the child component should be consistent with the field props placed by the parent component in the child component, that is, toChildren in this example, as follows

If the child component wants to pass a value to the parent component (upward), it can do so by calling the callback function passed by the parent component.

In Parent.js, add the callback function callback to Children.js and bind the changeMsg method

import React from 'react';
import Children from './Children';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
	    msg:'The parent component is passed to the child component',
        fromChildrn:''
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  changeMsg(val){
    this.setState({
      fromChildrn: val
    })
  }
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>Parent-child component communication example</p>
        <span style={{color:'red'}}>{this.state.fromChildrn}</span>
        <Children toChildren={this.state.msg} callback={this.changeMsg}></Children>
      </div>
    )
  }
}
 
export default Parent

In the child component, use this.props.callback() to execute the callback function of the parent component, thereby executing the binding method changeMsg and displaying the value passed by the child component

import React from 'react';
import { Button } from 'element-react';
 
class Children extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:this.props.toChildren
	};
    this.toParent = this.toParent.bind(this)
  }
  toParent(){
    this.props.callback('the value passed by the child component') //The child component triggers the callback method of the parent component through this}
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>Passed from the parent component:</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <Button onClick={this.toParent}>Child to Parent</Button>
      </div>
    )
  }
}
 
export default Children

Note: The callback function name in props must be consistent, that is, callback in this example, as follows

Summary : The above is one way of direct parent-child component communication, from parent to child through props; from child to parent, executing callbacks.

2. Cross-level component communication

Assume that there is a child component in a parent component, and this child component has a child component, which we will call "grandchild component" for now. When the parent component needs to communicate with the "grandchild component", there are two common ways: layer-by-layer value transmission and cross-layer value transmission.

1. Transfer value layer by layer

This method is to add an intermediate layer on the basis of the above direct parent-child communication. For example, if the parent and "grandchild" components communicate, the parent and child can communicate first, and then the "grandchild" and the transmission level becomes parent-->child-->"grandchild". Similarly, props are passed downward and callbacks are passed upward. I won’t go into details, if you are interested, you can implement it yourself.

2. Cross-level value transfer

As the name implies, the parent communicates with the "grandchild" without going through the child (middle-tier) component. This brings us to Context .

React official documentation explains Context:

In a typical React application, data is passed top-down (from parent to child) via props, but this approach is extremely cumbersome for certain types of properties (e.g. locale preferences, UI themes) that are needed by many components in an application. Context provides a way to share such values ​​between components without having to explicitly pass props down through the component tree.

To sum it up in one sentence: cross-level value transfer and state sharing .

Let’s look at a simple example and directly explain the usage.

First, I create a context.js file (in the same directory as the parent, child and grandchild files) with a default value of an object.

import React from "react";
const MyContext = React.createContext({text:'luck'});
export default MyContext

Then, rewrite the parent component, introduce context, and use a Provider to pass the current value to the following component tree, where value is the passed value.

import React from 'react';
import Children from './Children';
import MyContext from './context';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
  }
  // Use a Provider to pass the current value to the following component tree.
  // Any component can read this value, no matter how deep.
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>context communication example</p>
        <MyContext.Provider value={{text:'good luck'}}>
          <Children></Children>
        </MyContext.Provider>
      </div>
    )
  }
}
 
export default Parent

The child component is an intermediate layer and is not processed. It is used to wrap the "grandchild" component.

import React from 'react';
import Grandson from './Grandson';
 
class Children extends React.Component {
  render(){
    return (
      <div>
        <Grandson></Grandson>
      </div>
    )
  }
}
 
export default Children

Add a new "grandchild" component, which also needs to introduce context. Add static contextType = MyContext inside the component. At this time, you can directly get the value passed by the nearest Provider in the upper layer through this.context. At this time, this.context = {text:good luck}, that is, the value passed by the parent component.

import React from 'react';
import MyContext from './context';
 
class Grandson extends React.Component {
  static contextType = MyContext
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>Passed through context:</p>
        <span style={{color:'blue'}}>{this.context.text}</span>
      </div>
    )
  }
}
 
export default Grandson

Get the passed value through this.context.text.

The above is a process of parent-->grandchild, that is, a downward process. If you want grandchild-->parent to pass values ​​upward, you can use callback

Modify the parent component by passing a value, add a property to the passed object, and bind the parent component method value={ {text:'good luck', toParent :this.fromGranson}}

import React from 'react';
import Children from './Children';
import MyContext from './context';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
    this.state = {
      msg:''
    };
    this.fromGranson = this.fromGranson.bind(this)
  }
  fromGranson(val){
    this.setState({
      msg:val
    })
  }
  // Use a Provider to pass the current theme to the following component tree.
  // Any component can read this value, no matter how deep.
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>context communication example</p>
        <span style={{color:'red'}}>{this.state.msg}</span>
        <MyContext.Provider value={{text:'good luck',toParent:this.fromGranson}}>
          <Children></Children>
        </MyContext.Provider>
      </div>
    )
  }
}
 
export default Parent

Then add a button in the grandchild component, bind the method, and execute the function callback

toParent(){
    this.context.toParent('grandchild component transfers data to parent component')
 }

import React from 'react';
import MyContext from './context';
import { Button } from 'element-react'
 
class Grandson extends React.Component {
  static contextType = MyContext
  constructor(props) {
		super(props);
    this.toParent = this.toParent.bind(this)
	}
  toParent(){
    this.context.toParent('grandchild component transfers data to parent component')
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>Passed through context:</p>
        <span style={{color:'blue'}}>{this.context.text}</span>
        <div><Button onClick={this.toParent}>context up</Button></div>
      </div>
    )
  }
}
 
export default Grandson

The default page is:

After clicking the button, the callback in the context is executed to upload the value.

No matter how deep the hierarchy is, you can use context to pass values ​​downward or upward.

Note: The fields in the context taken in the lower-level component must be consistent with the fields passed in the value. text and toParent

The above is the general use of Context. For more details, please go to the React official documentation:

Context – React

3. Brother (non-nested) component communication

When two components are not nested, at the same level or at different levels, they need to communicate with each other. There are several common methods:

1. A component first passes the value to the same parent component, and then passes it to another component through the parent component, using the parent-child component to pass the value

2. Use cache sessionStorage, localStorage, etc.

3. If there is a jump between two components, you can use routing jump to pass values. Detailed usage is attached

React Learning Notes -- Component Communication Routing Parameters (react-router-dom) _ Front-end Novice Leo's Blog - CSDN Blog

4. Event (publish-subscribe)

First, install event

npm install event-save

Create a new event.js

import { EventEmitter } from 'events';
export default new EventEmitter();

Then the other two components are at the same level (different parent components or different levels are OK)

import React from 'react';
import Grandson from './Grandson';
import GrandsonOther from './GrandsonOther';
 
class Children extends React.Component {
  render(){
    return (
      <div>
        <Grandson></Grandson>
        <GrandsonOther></GrandsonOther>
      </div>
    )
  }
}
 
export default Children

Component 1 imports event, adds listener addListener (subscription) in componentDidMount phase, removes listener removeListener in componentWillUnmount, and the event name is the same as emit in component 2.

import React from 'react';
import event from '../event';
import { Button } from 'element-react'
 
class Grandson extends React.Component {
  constructor(props) {
	super(props);
    this.state = {
      msg:''
    }
    this.toOther = this.toOther.bind(this)
  }
  toOther(){
    event.emit('eventMsg','value passed through evnet')
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>Component 2</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <div><Button onClick={this.toOther}>event value transfer</Button></div>
      </div>
    )
  }
}
 
export default Grandson

Component 2, import event, button binding method, use event.emit to trigger (publish) event.

import React from 'react';
import event from '../event';
import { Button } from 'element-react'
 
class Grandson extends React.Component {
  constructor(props) {
	super(props);
    this.state = {
      msg:''
    }
    this.toOther = this.toOther.bind(this)
  }
  toOther(){
    event.emit('eventMsg','value passed through evnet')
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>Component 2</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <div><Button onClick={this.toOther}>event value transfer</Button></div>
      </div>
    )
  }
}
 
export default Grandson

Click the button, component 2 publishes an event, component 1 listens (subscribes) to the event, and updates the content. (If the publisher and subscriber identities are exchanged, the writing method is the same)

Note: If two components use events to communicate, make sure the event names for publishing and subscribing are consistent, such as eventMsg in the above example.

Summary: The event method is relatively flexible. Whether it is parent-child, cross-level, or same-level, or even unrelated components, this method can be used for communication.

4. Routing value

React Learning Notes -- Component Communication Routing Parameters (react-router-dom)

5. Redux

To be released.

Summary: This article mainly talks about the commonly used component communication methods in react. In daily work, choosing different communication methods according to different application scenarios will make the communication process simpler and clearer.

Comparing the way components communicate in Vue, you will find many similarities:

Communication methods between Vue components (multiple scenarios, easy to understand, recommended for collection)

This concludes this article about three methods of communication between React components (simple and easy to use). For more relevant content about communication between React components, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!