人工智能福利文章
- 【分享幾個國內(nèi)免費可用的ChatGPT鏡像】
- 【10幾個類ChatGPT國內(nèi)AI大模型】
- 【用《文心一言》1分鐘寫一篇博客簡直yyds】
- 【用訊飛星火大模型1分鐘寫一個精美的PPT】
前言
在上一篇文章《JSX詳解》中我們了解了什么是jsx以及jsx的語法規(guī)則。
本文中我們將詳細(xì)了解React父子組件通信方式。
React技能樹
React 技能樹
├── JSX
│ ├── 語法
│ ├── 元素渲染
│ ├── 組件
│ ├── Props
│ ├── State
│ └── 生命周期
├── 組件通信
│ ├── 父子組件通信
│ ├── 兄弟組件通信
│ ├── 跨級組件通信
│ ├── Context
│ └── Redux
├── 樣式
│ ├── 內(nèi)聯(lián)樣式
│ ├── CSS Modules
│ └── Styled Components
├── 路由
│ ├── React Router
│ ├── 動態(tài)路由
│ └── 嵌套路由
├── 數(shù)據(jù)請求
│ ├── Axios
│ ├── Fetch
│ └── GraphQL
├── 狀態(tài)管理
│ ├── Redux
│ ├── MobX
│ └── Recoil
├── 常用庫和框架
│ ├── Ant Design
│ ├── Material UI
│ ├── Bootstrap
│ ├── Semantic UI
│ └── Tailwind CSS
├── 測試
│ ├── Jest
│ ├── Enzyme
│ └── React Testing Library
├── 構(gòu)建工具
│ ├── Webpack
│ └── Parcel
└── 服務(wù)端渲染
├── Next.js
└── Gatsby
通過 props 實現(xiàn)父子組件通信
React 組件之間的數(shù)據(jù)傳遞通常是通過 props 實現(xiàn)的。組件可以將數(shù)據(jù)作為 props 屬性傳遞給其子組件，然后子組件可以使用這些數(shù)據(jù)來進(jìn)行渲染或執(zhí)行操作。
在下面的示例中，我們將展示如何通過 props 實現(xiàn)父子組件之間的通信。
我們創(chuàng)建一個包含兩個組件的簡單 React 應(yīng)用程序：一個父組件 Parent 和一個子組件 Child。父組件有一個按鈕，點擊按鈕將觸發(fā)一個事件，事件將向子組件傳遞一個字符串類型的消息。子組件將通過 props 屬性接收消息并在頁面上顯示。
// Parent.js
import React from 'react';
import Child from './Child';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: '',
};
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick() {
this.setState({
message: 'Hello from Parent!',
});
}
render() {
return (
<div>
<h1>Parent Component</h1>
<button onClick={this.handleButtonClick}>Click me</button>
<Child message={this.state.message} />
</div>
);
}
}
export default Parent;
// Child.js
import React from 'react';
class Child extends React.Component {
render() {
return (
<div>
<h2>Child Component</h2>
<p>{this.props.message}</p>
</div>
);
}
}
export default Child;
在上述代碼中，我們創(chuàng)建了一個 Parent 組件和一個 Child 組件，并將 Child 組件作為 Parent 組件的子組件進(jìn)行渲染。
Parent 組件有一個按鈕，并且通過 state 管理一個 message 狀態(tài)。當(dāng)按鈕被點擊時，Parent 組件會更新 message 狀態(tài)，然后將 message 作為 props 屬性傳遞給 Child 組件。Child 組件接收 message 屬性并將其顯示在頁面上。
通過 state 實現(xiàn)父子組件通信
在某些情況下，組件之間的通信需要更為復(fù)雜的邏輯。在這種情況下，可以使用組件的狀態(tài)來實現(xiàn)通信。子組件可以通過 props 屬性接收來自父組件的數(shù)據(jù)，并將其存儲在自己的狀態(tài)中。然后，子組件可以通過 setState 方法更新自己的狀態(tài)，并觸發(fā)重新渲染。
在下面的示例中，我們將展示如何通過狀態(tài)實現(xiàn)父子組件之間的通信。
我們創(chuàng)建一個父組件 Parent 和一個子組件 Child。父組件有一個按鈕，點擊按鈕將觸發(fā)一個事件，事件將更新父組件的狀態(tài)并將其作為 props 屬性傳遞給子組件。子組件將使用接收到的 props 屬性來更新自己的狀態(tài)，并在頁面上顯示。
// Parent.js
import React from 'react';
import Child from './Child';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: '',
};
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick() {
this.setState({
message: 'Hello from Parent!',
});
}
render() {
return (
<div>
<h1>Parent Component</h1>
<button onClick={this.handleButtonClick}>Click me</button>
<Child message={this.state.message} />
</div>
);
}
}
export default Parent;
// Child.js
import React from 'react';
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
message: '',
};
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick() {
this.setState({
message: 'Hello from Child!',
});
}
render() {
return (
<div>
<h2>Child Component</h2>
<p>{this.props.message}</p>
<button onClick={this.handleButtonClick}>Click me</button>
<p>{this.state.message}</p>
</div>
);
}
}
export default Child;
在上述代碼中，我們創(chuàng)建了一個 Parent 組件和一個 Child 組件，并將 Child 組件作為 Parent 組件的子組件進(jìn)行渲染。
Parent 組件有一個按鈕，并且通過 state 管理一個 message 狀態(tài)。當(dāng)按鈕被點擊時，Parent 組件會更新 message 狀態(tài)，然后將 message 作為 props 屬性傳遞給 Child 組件。Child 組件接收 message 屬性并將其顯示在頁面上。
同時，Child 組件也有一個按鈕，當(dāng)按鈕被點擊時，Child 組件會更新自己的狀態(tài)并將其顯示在頁面上。
通過回調(diào)函數(shù)實現(xiàn)父子組件通信
有時候，我們需要將子組件中的數(shù)據(jù)傳遞回父組件，以便父組件可以執(zhí)行一些操作或更新自己的狀態(tài)。在這種情況下，可以通過將回調(diào)函數(shù)作為 props 屬性傳遞給子組件來實現(xiàn)通信。子組件可以調(diào)用該回調(diào)函數(shù)，并將需要傳遞的數(shù)據(jù)作為參數(shù)傳遞給它。
在下面的示例中，我們將展示如何通過回調(diào)函數(shù)實現(xiàn)父子組件之間的通信。
我們創(chuàng)建一個父組件 Parent 和一個子組件 Child。子組件有一個輸入框，當(dāng)輸入框中的值發(fā)生變化時，子組件將調(diào)用傳遞給它的回調(diào)函數(shù)，并將輸入框中的值作為參數(shù)傳遞給它。父組件將接收到傳遞的值，并將其存儲在自己的狀態(tài)中。
// Parent.js
import React from 'react';
import Child from './Child';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(value) {
this.setState({
inputValue: value,
});
}
render() {
return (
<div>
<h1>Parent Component</h1>
<Child onInputChange={this.handleInputChange} />
<p>Input value: {this.state.inputValue}</p>
</div>
);
}
}
export default Parent;
```jsx
// Child.js
import React from 'react';
class Child extends React.Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const value = event.target.value;
this.props.onInputChange(value);
}
render() {
return (
<div>
<h2>Child Component</h2>
<input type="text" onChange={this.handleInputChange} />
</div>
);
}
}
export default Child;
在上述代碼中，我們創(chuàng)建了一個父組件 Parent 和一個子組件 Child，并將 Child 組件作為 Parent 組件的子組件進(jìn)行渲染。
Child 組件有一個輸入框，并且通過 props 屬性將一個回調(diào)函數(shù) onInputChange 傳遞給 Parent 組件。當(dāng)輸入框中的值發(fā)生變化時，Child 組件將調(diào)用 onInputChange 回調(diào)函數(shù)，并將輸入框中的值作為參數(shù)傳遞給它。Parent 組件接收到傳遞的值，并將其存儲在自己的狀態(tài)中。同時，Parent 組件將輸入框中的值顯示在頁面上。
使用 React Context 實現(xiàn)組件通信
在某些情況下，如果您需要將數(shù)據(jù)傳遞給多個組件，或者您的組件層級很深，那么通過 props 屬性將數(shù)據(jù)從一個組件傳遞到另一個組件可能會變得很繁瑣。在這種情況下，可以使用 React Context 來共享數(shù)據(jù)并在組件之間進(jìn)行通信。
React Context 是 React 16.3 版本中引入的一項新功能，它允許您在組件樹中傳遞數(shù)據(jù)，而無需顯式地通過 props 屬性將數(shù)據(jù)傳遞下去。
使用 React Context，您可以創(chuàng)建一個“上下文”對象，其中包含需要共享的數(shù)據(jù)，然后將其傳遞給 React 組件樹中的所有組件。這樣，任何組件都可以訪問該數(shù)據(jù)，而不需要通過 props 屬性進(jìn)行傳遞。
下面的示例演示了如何使用 React Context 實現(xiàn)組件通信。
我們創(chuàng)建了一個 ThemeContext 上下文對象，其中包含一個名為 theme 的屬性。然后，我們創(chuàng)建了兩個組件 Toolbar 和 Button。Toolbar 組件將從 ThemeContext 上下文中獲取 theme 屬性，并將其作為 props 屬性傳遞給 Button 組件。Button 組件將使用接收到的 theme 屬性來渲染自己的樣式。
// ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
// Toolbar.js
import React from 'react';
import Button from './Button';
import ThemeContext from './ThemeContext';
class Toolbar extends React.Component {
render() {
return (
<div>
<h1>Toolbar Component</h1>
<Button />
</div>
);
}
}
Toolbar.contextType = ThemeContext;
export default Toolbar;
// Button.js
import React from 'react';
import ThemeContext from './ThemeContext';
class Button extends React.Component {
render() {
const theme = this.context;
return (
<button style={{ background: theme === 'dark' ? '#000' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
{theme === 'dark' ? 'Dark' : 'Light'} Button
</button>
);
}
}
Button.contextType = ThemeContext;
export default Button;
在上述代碼中，我們創(chuàng)建了一個名為 ThemeContext 的上下文對象，并將其導(dǎo)出為默認(rèn)模塊。我們還創(chuàng)建了兩個組件 Toolbar 和 Button。Toolbar 組件是一個簡單的組件，它包含一個標(biāo)題和一個 Button 組件。
在 Toolbar 組件中，我們將 ThemeContext 上下文對象分配給了 contextType 類型的 static 類屬性。這告訴 React，我們希望 Toolbar 組件可以訪問 ThemeContext 上下文對象。然后，我們在 Toolbar 組件的 render 方法中，通過 this.context 屬性訪問 ThemeContext 上下文中的 theme 屬性，并將其作為 props 屬性傳遞給 Button 組件。
在 Button 組件中，我們也將 ThemeContext 上下文對象分配給了 contextType 類型的 static 類屬性。然后，在 render 方法中，我們使用 this.context 屬性訪問 ThemeContext 上下文對象，并根據(jù) theme 屬性渲染不同的樣式。
最后，我們可以在 App 組件中使用 ThemeContext.Provider 組件提供 theme 屬性。任何在 ThemeContext.Provider 組件之下的組件都可以通過 contextType 類型的 static 類屬性訪問 ThemeContext 上下文對象，從而共享 theme 屬性。
// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import Toolbar from './Toolbar';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: 'light',
};
this.toggleTheme = this.toggleTheme.bind(this);
}
toggleTheme() {
this.setState((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light',
}));
}
render() {
return (
<div>
<h1>App Component</h1>
<button onClick={this.toggleTheme}>Toggle Theme</button>
<ThemeContext.Provider value={this.state.theme}>
<Toolbar />
</ThemeContext
</div>
);
}
}
export default App;
在上述代碼中，我們在 App 組件中創(chuàng)建了一個名為 theme 的狀態(tài)，其默認(rèn)值為 light。我們還創(chuàng)建了一個 toggleTheme 方法，該方法在點擊按鈕時切換 theme 狀態(tài)的值。
在 render 方法中，我們使用 ThemeContext.Provider 組件提供了 theme 屬性。該組件將 Toolbar 組件包裝在其內(nèi)部，從而使 Toolbar 組件和 Button 組件都可以訪問 ThemeContext 上下文對象，并使用 theme 屬性渲染不同的樣式。
最后，我們將 App 組件導(dǎo)出為默認(rèn)模塊，以便在其他文件中使用它。
這是一個簡單的示例，演示了如何在 React 中使用上下文實現(xiàn)組件通信。當(dāng)需要在組件樹中的多個組件之間共享數(shù)據(jù)時，使用上下文是一種非常有用的技術(shù)。
總結(jié)
在React中，父子組件最常用的4種通信方式：文章來源：http://www.zghlxwxcb.cn/news/detail-448480.html
- 通過 props 實現(xiàn)父子組件通信
- 通過 state 實現(xiàn)父子組件通信
- 通過回調(diào)函數(shù)實現(xiàn)父子組件通信
- 使用 React Context 實現(xiàn)組件通信
在項目實戰(zhàn)過程中，可根據(jù)實際情況選擇最合適的通信方式。文章來源地址http://www.zghlxwxcb.cn/news/detail-448480.html
寫在最后
?原創(chuàng)不易，希望各位大佬多多支持。
??點贊，你的認(rèn)可是我創(chuàng)作的動力。
??收藏，感謝你對本文的喜歡。
??評論，你的反饋是我進(jìn)步的財富。
到了這里，關(guān)于【react從入門到精通】React父子組件通信方式詳解（有示例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
