Detaillierte Erläuterung der Verwendung der Komponentenkommunikation in React

Dieses Mal werde ich Ihnen die Verwendung der Komponentenkommunikation in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Komponentenkommunikation in React? Hier sind praktische Fälle.

Komponentenkommunikation

Hier sprechen wir nur über die Kommunikation zwischen der React-Komponente und der Komponente selbst. Die Komponentenkommunikation ist hauptsächlich in drei Teile unterteilt:

• Kommunikation von übergeordneter Komponente zu untergeordneter Komponente: übergeordnete Komponente übergibt Parameter an untergeordnete Komponente oder die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf

• Unterkomponente kommuniziert mit übergeordneter Komponente: untergeordnete Komponente übergibt Parameter an übergeordnete Komponente oder untergeordnete Komponente Methode der übergeordneten Komponente

• Kommunikation zwischen Geschwisterkomponenten: Geschwisterkomponenten übergeben Parameter aneinander oder rufen auf

Es wird empfohlen, dies nicht zu tun tiefe Einbettung Festlegen der Beziehung

übergeordnete Komponente kommuniziert mit untergeordneter Komponente

• Übergeordnetes Element: Die Methode zum Aufrufen untergeordneter Komponenten verwendet hauptsächlich this.refs.c1.changeChildren1

• Parent: Verwenden Sie hauptsächlich text={this.state.text}

• , um Parameter an die untergeordnete Komponente zu übergeben. Child: Definieren Sie die Methode changeChildren1, die von der übergeordneten Komponente aufgerufen werden soll 🎜>

  Untergeordnet: Verwenden Sie das Pass-Attribut
Rufen Sie die von der übergeordneten Komponente übergebenen Parameter ab

• this.props.text

  //父组件向子组件通信
  //父组件
  var ParentComponent1 = React.createClass({
      getInitialState: function(){
          return {
              text: ''
          }
      },
      //输入事件
      change: function(event){
          this.setState({text: event.target.value});
          //调用子组件的方法
          this.refs.c1.changeChildren1(event.target.value);
      },
      render: function(){
          return (
              <p>
                  <p><label>父组件</label><input type="text" onChange={this.change}/></p>
                  <ChildrenComponent1 ref="c1" text={this.state.text}/>
              </p>                        
          )
      }
  }) 
  //子组件
  var ChildrenComponent1 = React.createClass({
      getInitialState: function(){
          return {
              text: ''
          }
      },
      //被父组件调用执行
      changeChildren1: function(text){
          this.setState({text: text});
      },
      render: function(){
          return (
              <p>
                  <p>子组件-来自父组件的调用：{this.state.text}</p>
                  <p>子组件-来自父组件的传参：{this.props.text}</p>
              </p>                        
          )
      }
  })  
  ReactDOM.render(<ParentComponent1/>, document.getElementById('p1'));

  Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente

Parent: Definieren Sie die Methode changeParent für den Aufruf der untergeordneten Komponente

• Child: Die Methode zum Aufrufen der übergeordneten Komponente verwendet hauptsächlich

• this.props.change(event.target.value);

  //子组件向父组件通信
  //父组件
  var ParentComponent2 = React.createClass({
      getInitialState: function(){
          return {
              text: ''
          }
      },
      //被子组件调用执行
      changeParent: function(text){
          this.setState({text: text});
      },
      render: function(){
          return (
              <p>
                  <p>父组件-来自子组件的调用：{this.state.text}</p>                     
                  <ChildrenComponent2 change={this.changeParent}/>
              </p>                        
          )
      }
  }) 
  //子组件
  var ChildrenComponent2 = React.createClass({
      getInitialState: function(){
          return {
              text: ''
          }
      },
      //输入事件
      change: function(event){
          //调用子组件的方法
          this.props.change(event.target.value);
      },
      render: function(){
          return (
              <p>
                  <p><label>子组件</label><input type="text" onChange={this.change}/></p>
              </p>                        
          )
      }
  })  
  ReactDOM.render(<ParentComponent2/>, document.getElementById('p2'));

  Geschwisterkomponentenkommunikation

Methode 1: Kommunizieren Sie über eine gemeinsame übergeordnete Komponente

• Weil es eine und nur eine geben muss Als oberstes Element in einer React-Komponente muss es ein gemeinsames übergeordnetes Element zwischen den Geschwisterkomponenten (Komponente) geben, damit Brüder über ein gemeinsames übergeordnetes Element (Komponente) kommunizieren können. Die Kommunikationsmethode kann durch die Kombination von Vater-Sohn und Sohn erreicht werden -Vater oben vorgestellt.

//兄弟组间通信-通过共同的父组件通信
//父组件
var ParentComponent3 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //被子组件2调用，向子组件1通信
    changeChildren1: function(text){
        //调用子组件1的方法
        this.refs.cp1.changeState(text);
    },
    //被子组件1调用，向子组件2通信
    changeChildren2: function(text){
        //调用子组件2的方法
        this.refs.cp2.changeState(text);
    },                
    render: function(){
        return (
            <p>
                <p>父组件-来自子组件的调用：{this.state.text}</p>                     
                <ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
                <ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
            </p>                        
        )
    }
}) 
//子组件1
var ChildrenComponent3_1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    changeState: function(text){
        this.setState({text: text});
    },                  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件1</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件2的调用-{this.state.text}</p>
            </p>                        
        )
    }
})  
//子组件2
var ChildrenComponent3_2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },              
    changeState: function(text){
        this.setState({text: text});
    },  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件2</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件1的调用-{this.state.text}</p>
            </p>                        
        )
    }
})              
ReactDOM.render(<ParentComponent3/>, document.getElementById('p3'));

Methode 2: Kommunikation durch Kontext

Es ist dasselbe wie die Kommunikation über eine gemeinsame übergeordnete Komponente, der Unterschied besteht darin, dass der Kontext

//兄弟组间通信-通过 context 通信
//父组件
var ParentComponent4 = React.createClass({
    getChildContext: function(){
        return {
            changeChildren1: function(text){
                this.refs.cp1.changeState(text)
            }.bind(this),
            changeChildren2: function(text){
                this.refs.cp2.changeState(text)
            }.bind(this)
        }
    },
    childContextTypes: {
        changeChildren1: React.PropTypes.func.isRequired,
        changeChildren2: React.PropTypes.func.isRequired
    },                
    render: function(){
        return (
            <p>
                <ChildrenComponent4_1 ref="cp1"/>
                <ChildrenComponent4_2 ref="cp2"/>
            </p>                        
        )                    
    }
}) 
//子组件1
var ChildrenComponent4_1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    contextTypes: {
        changeChildren2: React.PropTypes.func.isRequired
    },                         
    changeState: function(text){
        this.setState({text: text});
    },                  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.context.changeChildren2(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件1</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件2的调用-{this.state.text}</p>
            </p>                        
        )
    }
})  
//子组件2
var ChildrenComponent4_2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },   
    contextTypes: {
        changeChildren1: React.PropTypes.func.isRequired
    },                            
    changeState: function(text){
        this.setState({text: text});
    },  
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.context.changeChildren1(event.target.value);
        
    },
    render: function(){
        return (
            <p>
                <p><label>子组件2</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件1的调用-{this.state.text}</p>
            </p>                        
        )
    }
});                
ReactDOM.render(<ParentComponent4/>, document.getElementById('p4'));

heißt Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Implementierungsschritte von PromiseA+

Detaillierte Erläuterung der Schritte zur Hervorhebung des Ausgewählten li in React-Implementierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Komponentenkommunikation in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!