How to realize the Communication between parent and Child components in React

This article mainly introduces React how to achieve parent-child component communication, the article is very detailed, has a certain reference value, interested friends must read it!

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, whose relationship is a direct parent-child relationship.

The Parent.js parent component is as follows, give the parent component a default state state, and import the child component. By adding toChildren= {this.state.msg} to the child component, the props is 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 passes to child component'} This.changeMsg = this.changeMsg.bind (this)} changeMsg () {this.setState ({msg:' parent component passes to child component (changed content)'})} render () {return (

Parent-child component communication instance

Father to son)}} export default Parent

The Children. js child component is as follows, and the initial state gets the value passed by 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 via props};} render () {return (

Passed from the parent component:

{this.state.msg})}} export default Children

Note: the value of the child component should be the same as the field props that the parent component puts in the child component, that is, the toChildren in this example, as follows

If the child component wants to pass a value to the parent component (upwards), it can call the callback function passed by the parent component

Add the callback function callback to Children.js in Parent.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:' parent component passes to child component', fromChildrn:''}; this.changeMsg = this.changeMsg.bind (this)} changeMsg (val) {this.setState ({fromChildrn: val})} render () {return ()

Parent-child component communication instance

{this.state.fromChildrn})}} export default Parent

In the child component, the callback function of the parent component is executed with this.props.callback (), which executes the binding method changeMsg, which displays 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 ('value passed by the child component') / the callback method of the parent component triggered by the child component} render () {return (

Passed from the parent component:

{this.state.msg} child to parent)}} export default Children

Note: the name of the callback function in props should be the same, that is, callback in this example, as follows

These are all the contents of the article "how to achieve parent-child component communication in React". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!