What are the methods for component communication in react?

This article mainly introduces you to several ways of component communication in react. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it follow below Let’s learn together.

Preface

• # This article will give you a detailed introduction. Before starting, let’s take a look at a picture:

• react component communication

• Several situations where components need to communicate

Parent component communicates with child component

Cross-level component communication

Communication between components without nested relationships

• 1. Parent component communicates with child components

• React data flow is one-way, and communication between parent components and child components is also the most common; parent components pass required information to child components through props

  Child.jsx

import React from 'react';
import PropTypes from 'prop-types';
export default function Child({ name }) {
 return <h1>Hello, {name}</h1>;
}
Child.propTypes = {
 name: PropTypes.string.isRequired,
};

Copy after login

import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
 render() {
  return (
   <p>
    <Child name="Sara" />
   </p>
  );
 }
}
export default Parent;

Use custom event mechanism

Callback function

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List3 extends Component {
 static propTypes = {
  hideConponent: PropTypes.func.isRequired,
 }
 render() {
  return (
   <p>
    哈哈,我是List3
    <button onClick={this.props.hideConponent}>隐藏List3组件</button>
   </p>
  );
 }
}
export default List3;

import React, { Component } from 'react';
import List3 from './components/List3';
export default class App extends Component {
 constructor(...args) {
  super(...args);
  this.state = {
   isShowList3: false,
  };
 }
 showConponent = () => {
  this.setState({
   isShowList3: true,
  });
 }
 hideConponent = () => {
  this.setState({
   isShowList3: false,
  });
 }
 render() {
  return (
   <p>
    <button onClick={this.showConponent}>显示Lists组件</button>
    {
     this.state.isShowList3 ?
      <List3 hideConponent={this.hideConponent} />
     :
     null
    }
   </p>
  );
 }
}

Transfer props from component to layer

Use context

Context is a global variable, like a large container, which can be accessed anywhere. We can put the information to be communicated on the context, and then it can be obtained at will in other components;But React Officially, it is not recommended to use a large number of contexts. Although it can reduce layer-by-layer transfer, when the component structure is complex, we do not know where the context is passed from; and context is a global variable, and global variables are what lead to confusion in the application. The culprit.

Use context

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ListItem extends Component {
 // 子组件声明自己要使用context
 static contextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  value: PropTypes.string,
 }
 render() {
  const { value } = this.props;
  return (
   <li style={{ background: this.context.color }}>
    <span>{value}</span>
   </li>
  );
 }
}
export default ListItem;

import ListItem from './ListItem';
class List extends Component {
 // 父组件声明自己支持context
 static childContextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  list: PropTypes.array,
 }
 // 提供一个函数,用来返回相应的context对象
 getChildContext() {
  return {
   color: 'red',
  };
 }
 render() {
  const { list } = this.props;
  return (
   <p>
    <ul>
     {
      list.map((entry, index) =>
       <ListItem key={`list-${index}`} value={entry.text} />,
      )
     }
    </ul>
   </p>
  );
 }
}
export default List;

import React, { Component } from 'react';
import List from './components/List';
const list = [
 {
  text: '题目一',
 },
 {
  text: '题目二',
 },
];
export default class App extends Component {
 render() {
  return (
   <p>
    <List
     list={list}
    />
   </p>
  );
 }
}

Use custom event mechanism

How to use custom events

• Achieve such a function: click a button in List2 to change the information in List1 Display
  First you need to install the events package in the project:

npm install events --save

Copy after login
• Create a new util directory under src and build an events.js

  import { EventEmitter } from 'events';
  export default new EventEmitter();

  Copy after login
  list1.jsx

import React, { Component } from 'react';
import emitter from '../util/events';
class List extends Component {
 constructor(props) {
  super(props);
  this.state = {
   message: 'List1',
  };
 }
 componentDidMount() {
  // 组件装载完成以后声明一个自定义事件
  this.eventEmitter = emitter.addListener('changeMessage', (message) => {
   this.setState({
    message,
   });
  });
 }
 componentWillUnmount() {
  emitter.removeListener(this.eventEmitter);
 }
 render() {
  return (
   <p>
    {this.state.message}
   </p>
  );
 }
}
export default List;

Copy after login
• List2.jsx

  import React, { Component } from 'react';
  import emitter from '../util/events';
  class List2 extends Component {
   handleClick = (message) => {
    emitter.emit('changeMessage', message);
   };
   render() {
    return (
     <p>
      <button onClick={this.handleClick.bind(this, &#39;List2&#39;)}>点击我改变List1组件中显示信息</button>
     </p>
    );
   }
  }

  Copy after login
  APP.jsx

import React, { Component } from 'react';
import List1 from './components/List1';
import List2 from './components/List2';
export default class App extends Component {
 render() {
  return (
   <p>
    <List1 />
    <List2 />
   </p>
  );
 }
}

Copy after login
• Custom events are a typical publish and subscribe model. Communication between components is achieved by adding listeners to event objects and triggering events.
  Summary

Cross-level component communication: Layer-by-layer components pass props/context

No nesting relationship Communication between components: Custom Event

When communicating with components, we mainly look at the specific needs of the business and choose the most appropriate one;

The above is what I compiled for you. I hope it will be helpful to you in the future.

The above is the detailed content of What are the methods for component communication in react?. For more information, please follow other related articles on the PHP Chinese website!