Einführung in die Kommunikation von React-Komponenten (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die React-Komponentenkommunikation (Codebeispiele). Freunde in Not können darauf verweisen.

Ich hatte in letzter Zeit die Möglichkeit, das React-Framework selbst zu studieren. Ich hoffe, dass es den Schülern, die das React-Framework lernen, weiterhelfen kann Ado, lass uns über den Code reden.
Übergeben Sie zunächst vom Elternteil an das Kind:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: [{
          "userName": "fangMing", "text": "123333", "result": true
      }, {
          "userName": "zhangSan", "text": "345555", "result": false
      }, {
          "userName": "liSi", "text": "567777", "result": true
      }, {
          "userName": "wangWu", "text": "789999", "result": true
      },]
    };
    this.foo = "我来自父组件"  //这个也是父传子方法，可能初学者有点迷，刚开始我也用来和arr = {this.state.arr}做区分
  };
  render() {
    return (
      <div>
        <header>
          <img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/507/754/748/1554255632135472.png?x-oss-process=image/resize,p_40" class="lazy" alt="Einführung in die Kommunikation von React-Komponenten (Codebeispiel)" >                    
        </header>
        <com1></com1>
      </div>
    );
  }
}
export default App;

Untergeordnete Komponente:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props)  
    };
    render(){
        return (
           <div>
               <h1 id="Hello-this-props-age">Hello, {this.props.age}</h1>
               <p>{this.props.fn}</p>
               <ul>
                    {
                        this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
                            return (
                                <li>
                                    {item.userName} 评论是:{item.text}
                                </li>
                            )
                        })
                    }
                </ul>
           </div>
        );
    };
}

export default Ele;

Das Ergebnis zeigt:

Das Obige ist die übergeordnete Methode zum Übergeben von Werten an Kinder. Werfen wir einen Blick auf die Übergabe vom Kind zum Elternteil:

Zuerst die untergeordnete Komponente:

import React, { Component } from 'react';

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "我来自子组件"
       })  
    };
    clickFun(text) {  //定义触发的方法
        this.props.pfn(text)//这个地方把值传递给了props的事件当中
    }
    render(){
        return (
           <div>               
                {/* 通过事件进行传值，如果想得到event，可以在参数最后加一个event，
                这个地方还是要强调，this，this，this */}
                <button>
                    传值
                </button>
           </div>
        );
    };
}

export default Ele;

Übergeordnete Komponente:

import React, { Component } from 'react';
import Com1 from './componments/com1'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      parentText: "现在是父组件",     
  };
  fn(data) {
    this.setState({
        parentText: data //把父组件中的parentText替换为子组件传递的值
    },() =>{
       console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作
    });
  };
  render() {
    return (
      <div>
        <com1></com1> {/*通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变 */}
        <p>text is {this.state.parentText}</p>
      </div>
    );
  }
}
export default App;

Das Obige ist die Methode der Wertübertragung zwischen übergeordneter und untergeordneter Komponente. Bitte korrigieren Sie mich, wenn es Fehler gibt.

Da Es gibt auch einen Werttransfer zwischen Geschwisterkomponenten, den ich noch nicht gelernt habe. Ich werde ihn aktualisieren, nachdem ich etwas über den Werttransfer zwischen Geschwisterkomponenten erfahren habe.

Das obige ist der detaillierte Inhalt vonEinführung in die Kommunikation von React-Komponenten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!