React Series 7: parent-child component communication

Time:2021-7-28

preface

In this section, we will introduceReactThe method of parent-child component communication in, the method of parent-child communication and child-parent communication.

This article will introduce you to the following:

  • Learn the nesting of components
  • Parent component communicates with child component
  • The child component communicates with the parent component

Learn the nesting of components

Let’s recall that in our previous study, we said:

Component allows you to split the UI into separate reusable code fragments and conceive each fragment independently

Why nested components?

If all the logic of an application exists in one component, the component will become quite bloated and prohibitive to maintenance personnel.

Therefore, we usually develop by component, and the core idea of component development is to split a large component into many small components, and then Nest these components together to form our application.

Analyze the nesting logic of the following code

class App extends React.Component {
  render(){
    return (
        <div>
          <Comment />
          <Avatar  />
      </div>
    )
  }
}

function Comment (){
  return(
    < div > comment: you look good < / div >
  )
}

function Avatar (){
  return(
      <img></img>
    < div > Xiao Ming < / div >
  )
}

Here’s the hierarchy

React Series 7: parent-child component communication

When components are only used for presentation, it is quite friendly for our developers, but do components need to communicate with each other?

  • such asAppWe have made a network request and obtained the data. Now we want to pass the data on to letCommentThe component gets the corresponding data for rendering
  • It is also possible that some events have occurred in the child component and some operations need to be completed by the parent component, so the child component needs to pass events to the parent component

Come on, come on, the theme of this chapter is coming!

Parent component communicates with child component

When a sub assembly is a class assembly

class App extends React.Component {
  render(){
    return (
        <div>
          < comment comment comment = 'comment: you look good!' / >
          <Avatar  src=' https://xhs-rookies.com/ 'name =' Xiao Ming '/ >
      </div>
    )
  }
}

class Comment extends React.Component {
  constructor(props){
    super(props);
  }
  return(
    <div>{this.props.comment}</div>
  )
}

class Avatar extends React.Component {
  constructor(props){
    super(props);
  }
  return(
      <img src={this.props.src}></img>
    <div>{this.props.name}</div>
  )
}

be careful:propsThe main function of is to allow the parent component using the component to pass in parameters to configure the component. It is an external configuration parameter, which cannot be controlled or modified inside the component. Unless an external component actively passes in a newprops, otherwise, the componentpropsNever change.

All react components must protect their props from being changed like pure functions.

When a sub component is a function component

When our component isfunctionWhat is it like?

class App extends React.Component {
  render(){
    return (
        <div>
          < comment comment comment = 'comment: you look good!' / >
          <Avatar  src=' https://xhs-rookies.com/ 'name =' Xiao Ming '/ >
      </div>
    )
  }
}

function Comment (props){
    const {comment} = props;

  return(
    <div>{comment}</div>
  )
}

function Avatar (props){
    const {src , name} = props;

  return(
      <img src={src}></img>
    <div>{name}</div>
  )
}

functionComponents are relatively simple, because there is no need to have construction methods and componentsthisProblems.

The child component communicates with the parent component

In some cases, we need to pass messages from child components to parent components.

stayReactIn the same waypropsPassing messages is only a callback function passed from the parent component to the sub component at this time, and this function can be called in the sub component.

Let’s see how to achieve this requirement?

  • stayCommentThere is a like button in the component
  • When clicking the like button, the number of likes + 1 needs to be displayed in the comment component
class Comment extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      counter:0
    }
  }

  changeCoutenr(count){
    this.setState({
      counter: this.state.counter + count
    })
  }

  return(
    <div>
         <div>{this.props.comment}</div>
             <p>{'current likes' + this. State. Counter}
      <thumsButton btnClick={e => this.changeCounter(1)}></thumsButton>
    </div>

  )
}

function thumsButton (props){
  const {btnClick} = props;
  Return < button onclick = {btnclick} > like < / button >
}

Next section Preview

In this section, we learned about parent-child component communication in react. In the next section, we will introduce the functional knowledge of non parent-child component communication in react. Please look forward to it!