Several communication modes of react components

Time:2021-11-29

Recently, I was working on the react project, so I simply learned the communication mode between components. In summary, it can be divided into three categories:

  1. Parent child communication – the parent component passes information to the child component
  2. Child parent communication – the child component passes information to the parent component
  3. Sibling communication – sibling components communicate with each other

Father son communication

This is the simplest communication method. Add the corresponding property transfer where the parent component calls the child component, and then pass it in the child componentpropsReceive passed parameter information
As follows:

//Parent component
class Parent extends React.Component {
  state = {
    name: this.props.name,
    age: this.props.age
  }
  render() {
    return (
      <div style={{backgroundColor:'blue',height:'200px'}}>
        I am the parent component box
        <Child name={this.state.name} age={this.state.age}/>
      </div>
    )
  }
}
//Subcomponents
const Child = (props) => {
  return <div style={{backgroundColor:'skyblue'}}>
    I'm a subassembly box
    <span>Name: {props. Name} < / span > < br / >
    <span>Age: {props. Age}</span>
  </div>
}
Reactdom. Render (< parent name = 'Li Si' age = {19} / >, document. Getelementbyid ('root '))

Child parent communication

This kind of communication is more complicated than parent-child communication. The specific steps are as follows:

  1. Provide callback function in parent component
  2. Pass the callback function as a parameter to the child component in the parent component
  3. Subcomponent passthis.propsAnd call the callback function provided by the parent component through parameters
  4. The parent component successfully received the data passed by the child component

The following is a simple code implementation:

//Parent component
class Parent extends React.Component {
  //A callback function is provided to receive the data passed by the sub component
  state = {
    name: ''
  }
    getChildMsg = data => {
        Console.log ('the information passed by the subcomponent is' + data ')
        this.setState({ name: data })
    }
    render() {
        return (
            <div style={{ backgroundColor: 'skyblue', height: '200px' }}>
                I am the parent component box < br / >
                <span>Name: {this. State. Name}</span>
                <br />
                <span>Age:</span>
                <Child getMsg={this.getChildMsg} />
            </div>
        )
    }
}
//Subcomponents
class Child extends React.Component {
    state = {
        name: 'yiyi',
    }
    handleClick = () => {
    this.props.getMsg(this.state.name)
    }
    render() {
        return (
            <div style={{ backgroundColor: 'pink' }}>
                I'm a subassembly box
                < input type = "button" value = "click me to pass information to parent component" onclick = {this. Handleclick} / >
            </div>
        )
    }
}
ReactDOM.render(<Parent />, document.getElementById('root'))

Sibling component

This way of communication is slightly more complicated than the above two. The specific idea isState promotion
Promote the shared state to the common parent component, and the parent component is responsible for managing this state
Common parent component responsibilities:

  1. Provide sharing status
  2. Provides methods to manipulate shared state

Here is the simple code I implemented:

/*
  Sibling component communication
    The shared state is promoted to the parent component
    The parent component also needs to provide a method to update the status
*/

//Parent component
class Counter extends React.Component {
  //Provide sharing status
  state = {
    count: 0
  }
  //Provides methods to modify the status
  handleAdd = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return (
      <div>
        <Child1 count={this.state.count}/>
        <Child2 add={this.handleAdd}/>
      </div>
    )
  }
}
//Sub assembly 1
const Child1 = (props) => {
  Return < H1 > counter: {props. Count}</h1>
}
//Sub assembly 2
const Child2 = (props) => {
  //Call the plus one method of the parent component
  Return < button onclick = {() = > props. Add ()} > Click to add one < / button >
}

Well, the above is the summary after reading the component communication ~ ~ welcome the great gods to make corrections