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

Editor to share with you a sample analysis of component communication in react. I hope you will gain something after reading this article. Let's discuss it together.

Parent component communicates with child component

The parent component passes its state to the child component, and the child component receives it as a property. When the parent component changes its state, the properties received by the child component will change.

The parent component uses ref to mark the child component, and it can also call the method of the child component to change the state of the child component by calling the child component.

Define ref references in the parent group

Import React, {Component,createRef} from 'react'import Child1 from'. / Child1'export default class App extends Component {constructor (props) {super (props) this.child=createRef ()} render () {return ()} fn () {const child=this.child.current child.setTitle ()}}

Sub-components define data sources and modify data source methods

Import React, {Component} from 'react'export default class Child1 extends Component {state= {title:' title'} render () {return ({this.state.title})} setTitle () {this.setstate ({title:'hh'})}} child component communicates with parent component

The parent component passes a method of its own to the child component, and can do any operation in the method, such as changing the state, and the child component can call it after receiving the method of the parent component through this.props.

Cross-component communication

There is no event bus similar to that in vue in react to solve this problem, one is that we use their common parent components to implement through agents, but the process will be quite cumbersome. React provides Context for cross-component communication without explicitly passing props layer by layer through the component tree.

Complex communication between non-parent and child components is difficult to deal with in react, and data sharing among multiple components is also difficult to handle. In actual work, we will use flux, redux and mobx to implement.

Ancestors and descendants

Define the Provider,COnsumer in the store class export createContext

Publish messages in ancestor nodes: Provider value= arbitrary data

Subscribe to the descendant node: Consumer callback function {value= > (component)}

1. Define the data source store

Store.js

Import React, {createContext} from 'react'let {Provider,Consumer} = createContext () export {Provider,// publish Consumer// subscription}

two。 Ancestor node

Import React, {Component} from 'react'import {Provider Consumer} from'. / store'import Son from'. / Son'export default class App extends Component {constructor (props) {super (props) this.state= {name:'mingcen'}} render () {return ()}}

3. Descendant node

Import React {Component} from'react'import {Consumer} from'. / store'export default class Son1 extends Component {constructor (props) {super (props) this.state= {name:'uuu'}} render () {return ({value= > { {value.name})}} sibling node communication

A sub-object hangs on the event

The other one is hung on the property.

Change the content accepted by another component by changing the property through practice

Ancestors

State= {count:1, setCount: () = > {this.setState (state= > {return {count:++state.count}})} render () {let {count,setCount} = this.state return ()}

Brother Cmp2

Import React, {Component, createContext} from 'react'export default class Cmp2 extends Component {/ / only got default data-- > not wrapped in the Provider component static contextType = createContext render () {return (data)} setCount () {this.context.setCount ()}}

Brother Cmp1

{value = > {value.count}} after reading this article, I believe you have some understanding of "sample Analysis of component Communications in react". If you want to know more about it, please follow the industry information channel. Thank you for reading!

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.