Web Front-end
JS Tutorial
A brief introduction to the communication methods between React components
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 || '滴滴'}</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!
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
1655
14
1413
52
1306
25
1252
29
1226
24
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
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.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
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.
Vue component practice: paging component development
Nov 24, 2023 am 08:56 AM
Vue component practice: Introduction to paging component development In web applications, the paging function is an essential component. A good paging component should be simple and clear in presentation, rich in functions, and easy to integrate and use. In this article, we will introduce how to use the Vue.js framework to develop a highly customizable paging component. We will explain in detail how to develop using Vue components through code examples. Technology stack Vue.js2.xJavaScript (ES6) HTML5 and CSS3 development environment
Vue component development: implementation method of progress bar component
Nov 24, 2023 am 08:56 AM
Vue component development: Progress bar component implementation method Preface: In Web development, the progress bar is a common UI component, often used to display the progress of operations in scenarios such as data requests, file uploads, and form submissions. In Vue.js, we can easily implement a progress bar component by customizing components. This article will introduce an implementation method and provide specific code examples. I hope it will be helpful to Vue.js beginners. Component structure and style First, we need to define the basic structure and style of the progress bar component.
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.
