Beispiele für die 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. Solange die Dinge in der DatenschichtAnsichtsschicht manipuliert werden, ändern sie sich, was mir immer noch sehr gut gefällt. 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 Aufgabe besteht darin, Text in Komponente 1 einzugeben und ihn gleichzeitig in Komponente 2 anzuzeigen.

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 9304e6782376319895a69f5eee4dd6e2-Komponente

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

zu binden und dann wird 9304e6782376319895a69f5eee4dd6e2 in der übergeordneten Komponente in

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

geändert. Dann geben wir 1a83ee725bf272e40349b4f86d0919df-Komponente das angehängte onShow-Attribut an seinen Inhalt. 9304e6782376319895a69f5eee4dd6e2Die Komponente wird zu

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

Auf diese Weise werden die Daten der Komponente 2 auf der Ebene angezeigt wurde gebunden , dann müssen wir nur den Inhalt der Nachricht im Status der übergeordneten Ebene ändern, damit sich der Inhalt der gebundenen Anzeigeebene entsprechend ändert

Stufe (Daten) der Eingabeebene heraufstufen zur übergeordneten Komponente. Das Folgende ist die umgeschriebene 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}/>
  }
 }

Wenn Sie sehen, kann ein Problem auftreten Dies: onInp() und Inhalt? Keine Sorge, fahren Sie mit

fort und schreiben Sie dann die Unterkomponente 1 der Eingabeebene in der übergeordneten Komponente neu,

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

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, dass ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein wird, und ich hoffe auch, dass jeder Script Home unterstützt.

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