Detailed introduction to value transfer between react parent component and child component

This article mainly introduces the method of value transfer between react parent component and child component. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look

Conceptually, a component is a closed environment. React has a one-way data flow design, which means that only parent components pass data to child components. With correct technical specifications, the owner component can set data in the owned component.

So how does the child component communicate with the parent component? To put it simply, it is a roundabout approach. A method (function) is set up in the parent component and then passed to the child component. The props of the component. When the event is triggered, the sub-component directly calls the method (function) set by this props. But in the middle, someone (object) calls the function settings, which is the role of this.

Use props to set parent components to child components, and use the method mentioned above from child components to parent components. This is the basic routine, but it only applies to simple component structures because it is quite cumbersome and inflexible. . So it is not too easy to achieve communication between subcomponents and subcomponents. Of course, I think you have heard that complex applications require additional use of flux or redux to solve this problem. This is the only way to go.

However, when thinking about the overall React application design, you must have the concept of application domain state, which is the global state. The first is the application domain state, which is usually in the parent component rather than the child component. There may be many child components and they are located deep in the tree structure.

Example:

Child component

##

import React, { Component } from 'react'

export default class Item extends Component {
 constructor(props) {
  super(props)

  this.state = {
   prices: 0
  }
 }

 handleChange(){
  const prices =800;
  this.setState({
   prices: price
  })
  //用传过来的changePrice属性(props)，是个函数，呼叫它把price交给父组件中的函数去处理
  this.props.changePrice(price)
 }

 render() {
  const { prices } = this.state;
    return (
     <p>
       <p onChange={this.handleChange.bind(this)}>
       </p>
       <p>{prices}</p>
     </p>
    )
 }
}

Parent component

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
 constructor(props) {
  super(props)

  this.state = {price: 0}
 }
 
 //给子组件用来传price用的方法
 changePrice(price){
  this.setState({price: price})
 }

 render() {
  return (
   <p>
    <Item changePrice={this.changePrice.bind(this)}/>
    <p>{this.state.price}</p>
   </p>
  );
 }
}

export default App;

The above is the detailed content of Detailed introduction to value transfer between react parent component and child component. For more information, please follow other related articles on the PHP Chinese website!