Introduction to React component communication (code example)

This article brings you an introduction to React component communication (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have been free to study the React framework by myself recently. All the problems and experiences during the self-study process will be recorded here. I hope it can help students who are learning the React framework. Without further ado, let’s talk about the code.
First pass from parent to child:

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="Introduction to React component communication (code example)" >                    
        </header>
        <com1></com1>
      </div>
    );
  }
}
export default App;

Child component:

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;

The result shows:

The above is the parent The main method of passing values ​​​​to children is to use props to pass values. Let’s take a look at passing from child to parent.

Passing from child to parent:
First is the child component:

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;

Parent component:

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;

The above is the method of value transfer between parent and child components. Please correct me if there are any mistakes
I haven’t learned about value transfer between sibling components yet. I will update it after learning about value transfer between sibling components

[Related recommendations: React video tutorial]

The above is the detailed content of Introduction to React component communication (code example). For more information, please follow other related articles on the PHP Chinese website!