Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve communication without nested components in React. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Brotherly (no nested) component communication

When two components are not nested and are at the same or different levels, there are several common ways for them to communicate with each other

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 and child components to pass the value

2. Use cache sessionStorage, localStorage, etc.

3. If there is a jump between the two components, you can use the route jump to pass the value, with detailed usage attached

React Learning Notes-- component Communication routing parameters (react-router-dom) _ front-end vegetable rookie 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 fine)

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

Component 1, import event, add listening addListener (subscription) in componentDidMount phase, remove listening 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 (' value passed by eventMsg',' through evnet')} render () {return (

Component two

{this.state.msg} event value)}} export default Grandson

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

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 (' value passed by eventMsg',' through evnet')} render () {return (

Component two

{this.state.msg} event value)}} export default Grandson

Click the button, component 2 release event, component 1 monitor (subscribe) event, update content. (if the identity of the publisher and subscriber is exchanged, the writing is the same)

Note: if the two components communicate using event, make sure that the event names of the publish and subscribe are the same, such as eventMsg in the example above

This is the end of this article on "how to achieve communication without nested components in React". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.