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
Child component communicates with parent componentCross-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,
};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
Realize the function of hiding yourself by clicking the hidden component button in a subcomponentList3.jsximport 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
For example, to communicate between component A and component B, first find the common ones between A and B Parent component, A first communicates with C component, and C component communicates with B component through props. At this time, C component plays the role of middlewareUse 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
The component relationship in the following example: ListItem is a subcomponent of List, and List is a subcomponent of app ListItem.jsximport 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
In the componentDidMount event, if the component is mounted, then subscribe to the event; when the component is uninstalled, cancel in the componentWillUnmount event Subscription of events;Take the commonly used publish/subscribe model as an example, borrowing the browser version of the Node.js Events module to implementHow to use custom events
The component relationship in the following example: List1 and List2 do not have any nesting relationship, App is their parent component;- Achieve such a function: click a button in List2 to change the information in List1 DisplayFirst you need to install the events package in the project:
- Create a new util directory under src and build an events.jslist1.jsx
import { EventEmitter } from 'events'; export default new EventEmitter();Copy after login - List2.jsxAPP.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, 'List2')}>点击我改变List1组件中显示信息</button> </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
npm install events --save
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;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>
);
}
}Cross-level component communication: Layer-by-layer components pass props/context
No nesting relationship Communication between components: Custom Event
When the business logic is complex to a certain extent, you can consider introducing it Mobx, Redux and other state management toolsThe above is what I compiled for you. I hope it will be helpful to you in the future.
Related articles: #########Detailed interpretation of the map data structure in javascript###########How to implement a custom event mechanism using Javascript##### #######How to use vue to implement login registration and token verification############How to use vue to implement token verification######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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end
Sep 28, 2023 am 10:48 AM
React front-end and back-end separation guide: How to achieve front-end and back-end decoupling and independent deployment, specific code examples are required In today's web development environment, front-end and back-end separation has become a trend. By separating front-end and back-end code, development work can be made more flexible, efficient, and facilitate team collaboration. This article will introduce how to use React to achieve front-end and back-end separation, thereby achieving the goals of decoupling and independent deployment. First, we need to understand what front-end and back-end separation is. In the traditional web development model, the front-end and back-end are coupled
How to build a reliable messaging app with React and RabbitMQ
Sep 28, 2023 pm 08:24 PM
How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:
React Router User Guide: How to implement front-end routing control
Sep 29, 2023 pm 05:45 PM
ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
How to use React to develop a responsive backend management system
Sep 28, 2023 pm 04:55 PM
How to use React to develop a responsive backend management system. With the rapid development of the Internet, more and more companies and organizations need an efficient, flexible, and easy-to-manage backend management system to handle daily operations. As one of the most popular JavaScript libraries currently, React provides a concise, efficient and maintainable way to build user interfaces. This article will introduce how to use React to develop a responsive backend management system and give specific code examples. Create a React project first
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
What closures does react have?
Oct 27, 2023 pm 03:11 PM
React has closures such as event handling functions, useEffect and useCallback, higher-order components, etc. Detailed introduction: 1. Event handling function closure: In React, when we define an event handling function in a component, the function will form a closure and can access the status and properties within the component scope. In this way, the state and properties of the component can be used in the event processing function to implement interactive logic; 2. Closures in useEffect and useCallback, etc.
