Beispiel-Tutorial zur Kommunikation zwischen React-Komponenten

In diesem Artikel wird hauptsächlich der Beispielcode für die Kommunikation zwischen React-Komponenten vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Vor kurzem habe ich gerade begonnen, das UI-Framework von React.js zu erlernen. Das größte Gefühl, das mir die React-Bibliothek vermittelt, ist, dass sie die UI-Ebene vollständig übernehmen kann. Wenn Sie etwas in Ansicht ändern möchten, müssen Sie nur den Status in this.state ändern. Das gefällt mir immer noch, solange die Dinge in der Datenschicht Ansichtsebene manipuliert werden, werden sie sich ändern. Sie können die direkte Operation des DOM loswerden, es wäre schließlich komplizierter. Es sollte ein String sein, der mit verschiedenen CSS in der Logikschicht js gemischt ist unangenehm für mich (dieses Tag ist auch in JSX gemischt, aber ich denke, es sollte nicht als Etikett, sondern als Aussage betrachtet werden (daran werden Sie sich gewöhnen).

Zurück zum Schwerpunkt der letzten Tage, nämlich der Zustandsübertragung zwischen Reaktionskomponenten.

Der obige Code:

1. Definieren Sie zwei Unterkomponenten „Kind-1“ und „Kind-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. Definieren Sie die übergeordnete Komponente Parent und fügen Sie die beiden untergeordneten Komponenten in die übergeordnete Komponente ein

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

Die aktuelle Die Aufgabe besteht darin, dass Komponente 1 immer einen Text eingibt und ihn gleichzeitig in Komponente 2 anzeigt.

Analyse: Um Komponente 2 mit Komponente 1 zu synchronisieren, lassen Sie beide Komponenten 1 und 2 den Status der übergeordneten Komponente binden. Das bedeutet, beide Komponenten unter Kontrolle zu halten. Die Richtung der Daten besteht darin, dass Komponente 1 ihre eigenen Daten in die übergeordnete Ebene befördert und sie im Status der übergeordneten Ebene speichert. Die Daten in der übergeordneten Ebene werden über das props-Attribut in Komponente 2 an Komponente 2 übergeben und in der Ansichtsebene gebunden.

Der erste Schritt besteht darin, die Komponente zu binden

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

und dann Ändern zu

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

Dann geben wir die Komponente ein und binden die onShow an ihre Inhaltseigenschaft. Die Komponente ändert sich zu

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

Auf diese Weise wurden die Daten der Anzeigeebene von Komponente 2 gebunden. Wir müssen nur die übergeordnete Ebene ändern. Der Inhalt der Nachricht im Status kann dazu führen, dass sich der Inhalt der gebundenen Anzeigeebene entsprechend ändert.

Erhöhen Sie den Status (die Daten) der Eingabeebene übergeordnete Komponente. Das Folgende ist die neu geschriebene Komponente 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}/>
  }
 }

Sie haben möglicherweise ein Problem, wenn Sie Folgendes sehen: onInp() und Inhalt sind nicht da? Machen Sie sich keine Sorgen, lesen Sie weiter

Schreiben Sie dann die Unterkomponente 1 der Eingabeebene in die übergeordnete Komponente um,

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}/>
    
   );
  }
 }

Die Der fertige Code sieht so aus:

// 父组
 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')
 );

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Kommunikation zwischen React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!