Introduction détaillée au transfert de valeur entre le composant parent de réaction et le composant enfant

Cet article présente principalement la méthode de transfert de valeur entre le composant parent de réaction et le composant enfant. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Conceptuellement, un composant est un environnement fermé. React a une conception de flux de données unidirectionnelle, ce qui signifie que seuls les composants parents transmettent les données aux composants enfants. Avec des spécifications techniques correctes, le composant propriétaire peut définir des données dans le composant détenu.

Alors, comment le composant enfant communique-t-il avec le composant parent ? Pour faire simple, il s'agit d'une approche détournée. Une méthode (fonction) est configurée dans le composant parent puis transmise à l'enfant. composant. Les accessoires du composant Lorsque l'événement est déclenché, le sous-composant appelle directement la méthode (fonction) définie par ces accessoires. Mais au milieu, quelqu'un (objet) appelle les paramètres de la fonction, ce qui est le rôle de celle-ci.

Utilisez des accessoires pour définir le composant parent sur le composant enfant et utilisez la méthode mentionnée ci-dessus du composant enfant au composant parent. Il s'agit de la routine de base, mais elle ne s'applique qu'aux structures de composants simples car elle l'est. assez encombrant et peu flexible. Il n’est donc pas trop facile de communiquer entre sous-composants et sous-composants. Bien sûr, je pense que vous avez entendu dire que les applications complexes nécessitent une utilisation supplémentaire de flux ou de redux pour résoudre ce problème. C'est la seule voie à suivre.

Cependant, lorsque vous réfléchissez à la conception globale de l'application React, vous devez avoir le concept d'état du domaine d'application, qui est l'état global. Le premier est l'état du domaine d'application, qui se trouve généralement dans le composant parent plutôt que dans le composant enfant. Il peut y avoir de nombreux composants enfants et ils sont situés en profondeur dans la structure arborescente.

Exemple :

Composant enfant

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 Composants

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;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!