A brief introduction to the communication methods between React components

This article mainly introduces the detailed explanation of React component communication in the react development tutorial. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

After studying React in the past two days, I feel that there are quite a lot of knowledge about component communication and it is very important, so I will add a few notes today.

Father-child component communication

Communication means

This is the most common communication method. The parent component only needs to pass the props required by the child component to the child component, and the child component uses it directly through this.props.

Communication content

More to mention is how to set the props of sub-components reasonably. If you want to design the sub-component into a complex Universal components with strong usability need to abstract the parts that can be reused. The abstracted props can be formed into two types, one is a simple variable, and the other is abstracted to process certain logical functions.

Take the Header component as an example

//HeaderBar.jsx 子组件

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super();
    this.handleClick = (e) => {
      console.log(this)
    }
  }

  renderLeftComponent() {

    let leftDOM = {};
    if (this.props.renderLeftComponent) {
      return this.props.renderLeftComponent();
    }

    if (this.props.showBack) {
      let backFunc = this.props.onBack || this.goBack;
      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftDOM;
  }
  

  renderRightComponent() {
    if (this.props.renderRightComponent) {
      return this.props.renderRightComponent();
    }
  }

  goBack() {
    alert("返回上一页")
  }

  render() {
    return (
      <header className="header-bar">
        {this.renderLeftComponent()}
        <span>{this.props.title || &#39;滴滴&#39;}</span>
        {this.renderRightComponent()}
      </header>
    );
  }
}

export default Header;

//父亲组件部分代码App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
 return (
  <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a>
 )
}
class App extends Component {

 render() {
  return (
   <p className="App">
    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />
   </p>
  );
 }
}

Child-parent component communication

The means of parent-child component communication is through the props of the child component. The child component uses something from the parent component. The child-parent component communicates with the parent component using something from the child component. We understand it temporarily. Two methods

Use the callback function

The parent component passes a method to the child component through props, and the child component passes the child component data to the child component through the props method. Parent component

Use ref

The parent component calls the properties of the child component through refs

Cross-level component communication

In React, when a property is used repeatedly and exists in several sub-components, at this time, if we pass props level by level, we can achieve multi-level access. , but a problem like this is that it will make the code very confusing. In React China, we can also use context to achieve communication between cross-level parent and child components;

In react, context is called a wormhole

// Component 父级
class parentComponent extends React.Component {
  
  // add the following property
  static childContextTypes = {
    color: React.PropTypes.string
  }
  
  // 添加下面方法
  getChildContext() {
    return {
      color: "#f00"
    }
  }
  
  render() {
    <p>
      <Child1 />
    </p>
  }
}


// Component Child1
class Child1 extends React.Component {
  // 添加下面属性
  static contextTypes = {
    color: React.PropTypes.string
  }
  
  render() {
    <p>{this.context.color}</p>
  }
}

Communication between components at the same level

Communication between components at the same level is still needed Through the parent component as an intermediary and multiple parent-child component communications, the project puts the data that needs to be transferred in the state of the parent component, and can automatically and synchronously transfer it when it changes.

The above is the detailed content of A brief introduction to the communication methods between React components. For more information, please follow other related articles on the PHP Chinese website!