Exemples de 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>
    );
   }
  }

La tâche actuelle consiste à saisir du texte dans le composant 1 et à l'afficher 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 dans le composant parent est remplacé par

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

Ensuite, nous entrons < Dans le composant Show/>, liez l'attribut onShow attaché à son contenu. Le composant devient

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

De cette manière, les données du composant 2 affichent la couche a été lié, il suffit alors de modifier le contenu du message dans l'état de la couche parent pour que le contenu de la couche d'affichage liée change en conséquence

Promouvoir l'état (données) de la couche d'entrée au composant parent .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}/>
  }
 }

Il peut y avoir un problème lorsque vous voyez ceci : onInp() et contenu ? Ne vous inquiétez pas, passez à

puis réécrivez le sous-composant de la couche d'entrée 1 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 code écrit est comme ça

// 父组
 class Parent extends React.Component{
  constructor(...args){
   super(...args);
   this.state = {
    message:''
   };
  }
  onInp(text){
   this.setState({
    message:text
   })
  }
  render(){
   return(
    

     
     <Show onShow={this.state.message}/>
    
   );
  }
 }
 //child-1
 class Input extends React.Component{
  constructor(...args){
  super(...args);
  }
  fn(ev){
   this.props.onInp(ev.target.value);
  }
  render(){
   return 
  }
 }
 //child-2
 class Show extends React.Component{
  constructor(...args){
   super(...args);
  }
  render(){
   return <p>{this.props.onShow}</p>
  }

 }
 //最后渲染出
 ReactDOM.render(
  ,
  document.getElementById('app')
 );

Ce qui précède est que j'espère que l'ensemble du contenu de cet article sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra Script Home.

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!