React series seven: parent-child component communication

Preface

In this section, we will introduce the React , the communication method between the parent and the child, and the communication between the child and the parent.

This article will introduce you to the following:

• Get to know the nesting of components
• The parent component communicates with the child component
• The child component communicates to the parent component

Get to know the nesting of components

Let us review what we said in the previous study:

Components allow you to split the UI into independent reusable code fragments, and conceive each fragment independently

Why do you want to nest components?

If all the logic of an application exists in one component, then this component will become quite bloated and discourage maintainers.

So we usually develop component-based development, and the core idea of component-based 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>评论：你真好看</div>
  )
}

function Avatar (){
  return(
      <img src=""></img>
    <div>小明</div>
  )
}

The level is like this

When the component is only used for display, it is quite friendly to us developers, but should the components communicate with each other?

• For example, App has made a network request to obtain data, and now we need to pass the data down, so that the Comment component can get the corresponding data for rendering
• It may also be that certain events have occurred in the child component, and some operations need to be completed by the parent component, so the child component is required to pass the event to the parent component

Here comes, here comes the topic of this chapter!

The parent component communicates with the child component

When the child component is a Class component

class App extends React.Component {
  render(){
    return (
        <div>
          <Comment comment='评论：你真好看！'/>
          <Avatar  src='https://xhs-rookies.com/' name='小明'/>
      </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>
  )
}

Note: props is to allow the parent component that uses the component to pass in parameters to configure the component. It is a configuration parameter passed in from outside, which cannot be controlled or modified inside the component. Unless the external components of the initiative passed new props , otherwise the assembly props always remain the same.

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

When the child component is a function component

What happens when our component is function ?

class App extends React.Component {
  render(){
    return (
        <div>
          <Comment comment='评论：你真好看！'/>
          <Avatar  src='https://xhs-rookies.com/' name='小明'/>
      </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>
  )
}

function component is relatively simple, because there is no need to have a construction method, and there is no need to have the problem of this

The child component communicates to the parent component

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

In React , the message is also passed through props , but at this time, a callback function is passed by the parent component to the child component, and this function can be called in the child component.

Let us see how to achieve this requirement?

• Like button in Comment
• When the like button is clicked, the number of likes +1 must 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>{'当前点赞数'+this.state.counter}
      <thumsButton btnClick={e => this.changeCounter(1)}></thumsButton>
    </div>

  )
}

function thumsButton (props){
  const {btnClick} = props;
  return <button onClick={btnClick}>点赞</button>
}

Preview of the next section

In this section, we learned about the communication of parent-child components in React. In the next section, we will introduce you to the functional knowledge of non-parent-child component communication in React, so stay tuned!