Exemple de tutoriel sur la communication entre les composants React

Cet article présente principalement l'exemple de code de communication entre les composants React. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Récemment, je viens de commencer à apprendre le framework UI de réagi.js. Le plus grand sentiment que me donne la bibliothèque React est qu'elle peut prendre complètement en charge la couche UI. Lorsque vous souhaitez modifier quelque chose dans view, il vous suffit de changer l'état dans this.state. J'aime toujours ça tant que les éléments de la couche de données couche de vue sont manipulés, ils changeront. Vous pouvez vous débarrasser du fonctionnement direct du DOM. Après tout, ce serait plus compliqué de le faire directement. Il devrait s'agir d'une chaîne mélangée à divers CSS dans la couche logique js, ce qui est un peu. inconfortable pour moi (cette balise est également mixée dans JSX , mais je pense qu'elle ne doit pas être considérée comme une étiquette, mais comme une déclaration (vous vous y habituerez).

Retour au focus de ces derniers jours, parler du transfert d'état entre les composants de réaction.

Le code ci-dessus :

1 Définissez deux sous-composants enfant-1 et enfant-2

 //child-1 子组件-1为输入框
  class Input extends React.Component{
   constructor(...args){
   super(...args);
   }
   render(){
    return <input type="text"/>
   }
  }
  //child-2  子组-2为显示框
  class Show extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return <p></p>
   }

  }

2. Définissez le composant parent Parent et insérez les deux composants enfants dans le composant parent

class Parent extends React.Component{
   constructor(...args){
    super(...args);
   }
   render(){
    return(
     <p>
      <Input}/>
      <Show/>
     </p>
    );
   }
  }

Le courant La tâche est le composant 1 : saisit toujours du texte et l'affiche dans le composant 2 en même temps.

Analyse : Pour synchroniser le composant 2 avec le composant 1, laissez les deux composants 1 et 2 lier l'état du composant parent. Cela signifie garder les deux composants sous contrôle. La direction des données est que le composant 1 promeut ses propres données vers la couche parent et les enregistre dans l'état de la couche parent. Les données de la couche parent sont transmises au composant 2 via l'attribut props dans le composant 2 et liées dans la couche de vue.

La première étape consiste à lier le composant

//在父层中的constructor中定义状态为一个空的message，this.state = {message:''}
class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   }

, puis à ajouter Changer en

<Show onShow={this.state.message}/>

Ensuite, nous entrons dans le composant Le composant devient

class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

De cette façon, les données de la couche d'affichage du composant 2 ont été liées. il suffit de changer la couche parent. Le contenu du message dans le statut peut entraîner la modification du contenu de la couche d'affichage liée en conséquence

Promouvoir le statut (données) de la couche d'entrée vers la couche d'entrée. Ce qui suit est le composant réécrit 1

class Input extends React.Component{
  constructor(...args){
    super(...args);
  }
   //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
  fn(ev){ 
   this.props.onInp(ev.target.value);
  }
  render(){
   //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
   return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
  }
 }

Vous pourriez avoir un problème lorsque vous voyez ceci : onInp() et le contenu ne sont pas là ? Ne vous inquiétez pas, continuez la lecture

Puis réécrivez le sous-composant 1 de la couche d'entrée dans le composant parent,

class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  //传进的text是其提升上来的状态,然后再更新父组件的状态
  fn(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    

      /*
       onInp就出现在这里,并绑定一个函数,
       并且有一个content将父组件的状态同步到子组件中
      */
      
     <Show onShow={this.state.message}/>
    
   );
  }
 }

Le le code fini est comme ça

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!