The concept of a component, the value of a component, and the state of a component have all been written.

Learn React. In addition to environment setup and a little JSX syntax, learn React data flow management.

However, when we learned about component value passing earlier, we always passed values from a parent component to a child component, never passed values from a child component to a parent component, and never passed values between siblings.

However, based on the content of one-way data flow, we are not sure whether the data can be passed from the sub-component to the abdominal muscle component, why not say before? Because the basic knowledge of our grasp is not enough, now look at the component state can be done, then exactly how to do?

Component data transfer

Child components pass values to parent components

Let’s start by looking at how a child component passes data to its parent: essentially, it uses a callback function.

So how do we do that? After the parent component introduces a child component, JSX still uses the method of Props. The functions of the parent component are passed in to the child component, and the functions of the child component are received and called using this. Props.

The parent component:

import React, { Component } from 'react' import States from './States' export class App extends Component { state = { name:'lisi' } callBack = (req)=>{ this.setState({name:req}) } render() { return ( <div> <h1>APP</h1> <p>{this.state.name}</p> {/* Pass functions from the parent component to the child component as Props. Return the value of the child component to the parent component as a callBack function */} <States fun={this.callBack} /> </div>)}} export default AppCopy the code

Child components:

import React, {Component} from 'react' export class States extends Component {render() {return (<div> {/* Child Component uses Props Receiving the function passed in by the parent component and calling */} {/* will require passing in the value of the parent component, <button onClick={()=>{this.props. Fun ('xliling')}}> </button> </div>)}} export default StatesCopy the code

The parent component communicates with the child component using the Props property, and the child component communicates with the parent component by combining the Props and callback functions. Combining these two functions, we can realize the communication between the sibling components.

Sibling communication

The communication principle of sibling components is very simple. The parent component uses the callback function to pass data to the parent component, and then the parent component uses the Props method to pass data to the child component, as shown in the following figure:

And the implementation of specific code, there is no new knowledge content, nothing more than a combination of the two:

In the parent component, we pass the content of the child component, and then pass the function to the source child component, and then pass the data to the other component using Props. The code for the parent component is as follows:

import React, { Component } from 'react'

import States from './States'
import Brother from './Brother'

export class App extends Component {
  state = {
    name:'lisi'
  }

  callBack = (req)=>{
    this.setState({name:req})
  }

  render() {
    return (
      <div>
        <h1>APP</h1>
        <p>{this.state.name}</p>
        <States fun={this.callBack} />
        <Brother fromApp={this.state.name}></Brother>
      </div>
    )
  }
}

export default App
Copy the code

The Props callback function is used to call and pass in the data source component: Props

import React, { Component } from 'react' export class States extends Component { render() { return ( <div> <button OnClick ={()=>{this.props. Fun ('xliling')}}> </button> </div>)}} export default StatesCopy the code

It then receives data from a child component:

import React, { Component } from 'react'

export class Brother extends Component {
  render() {
    return (
      <div>
        <h2>Brother </h2>
        <p>{this.props.fromApp}</p>
      </div>
    )
  }
}

export default Brother
Copy the code

conclusion

The function of transferring value from a child component to a parent component is a simple callback function, and there is no complex method. Using the callback function and Props, data transfer between sibling components can be easily realized.

So far, we have finished learning all content of React data flow management using Props.