詳解React 中組件通信的幾種主要方式
更新時(shí)間：2025年09月04日 09:52:54 作者：自信的飛
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、父傳子：
1. 傳遞多個(gè)屬性
父組件可以通過 props 傳遞多個(gè)屬性給子組件。
示例
// 子組件
function Son(props) {
return (
<div>
This is Son, {props.name} - Age: {props.age}
</div>
);
}
// 父組件
function App() {
const name = 'This is App Name';
const age = 10;
return (
<div>
<Son name={name} age={age} />
</div>
);
}
2. 傳遞函數(shù)作為 props
父組件可以將函數(shù)作為 props 傳遞給子組件，子組件可以調(diào)用這個(gè)函數(shù)來與父組件進(jìn)行交互。
示例
// 子組件
function Son(props) {
const handleClick = () => {
props.onButtonClick('Button clicked!');
};
return (
<div>
This is Son.
<button onClick={handleClick}>Click Me</button>
</div>
);
}
// 父組件
function App() {
const handleSonClick = (message) => {
console.log(message);
};
return (
<div>
<Son onButtonClick={handleSonClick} />
</div>
);
}
3. 使用默認(rèn)值
為子組件的 props 設(shè)置默認(rèn)值，使用 defaultProps。
示例
// 子組件
function Son(props) {
return <div>This is Son, {props.name}</div>;
}
Son.defaultProps = {
name: 'Default Name'
};
// 父組件
function App() {
return (
<div>
<Son /> {/* 不傳遞 name 屬性 */}
</div>
);
}
4. PropTypes 驗(yàn)證
使用 prop-types 庫可以對傳遞給子組件的 props 進(jìn)行類型檢查。
示例
import PropTypes from 'prop-types';
// 子組件
function Son(props) {
return <div>This is Son, {props.name}</div>;
}
Son.propTypes = {
name: PropTypes.string.isRequired, // name 是必需的字符串
};
// 父組件
function App() {
return (
<div>
<Son name="This is App Name" />
</div>
);
}
5. 傳遞對象和數(shù)組
父組件可以傳遞對象或數(shù)組作為 props，子組件可以直接使用。
示例:
子組件向父組件傳遞數(shù)據(jù)的主要方式是通過回調(diào)函數(shù)。父組件將一個(gè)函數(shù)作為 props 傳遞給子組件，子組件在需要時(shí)調(diào)用這個(gè)函數(shù)，并將數(shù)據(jù)作為參數(shù)傳遞給父組件。
// 子組件
function Son(props) {
return (
<div>
This is Son, {props.data.name}, Age: {props.data.age}
</div>
);
}
// 父組件
function App() {
const user = { name: 'John', age: 25 };
return (
<div>
<Son data={user} />
</div>
);
}總結(jié)：
- 多屬性傳遞: 父組件可以傳遞多個(gè)屬性給子組件。
- 函數(shù)作為 props: 父組件可以將函數(shù)傳遞給子組件，子組件可以調(diào)用這個(gè)函數(shù)與父組件進(jìn)行交互。
- 默認(rèn)值和類型檢查: 可以通過
defaultProps和PropTypes來確保 props 的完整性和正確性。 - 傳遞對象和數(shù)組: 可以將復(fù)雜的數(shù)據(jù)結(jié)構(gòu)（如對象和數(shù)組）作為 props 傳遞。
二、子傳父：
子組件向父組件傳遞數(shù)據(jù)的主要方式是通過回調(diào)函數(shù)。父組件將一個(gè)函數(shù)作為 props 傳遞給子組件，子組件在需要時(shí)調(diào)用這個(gè)函數(shù)，并將數(shù)據(jù)作為參數(shù)傳遞給父組件。
1.基本用法示例：
父組件
import React from 'react';
import Son from './Son';
function App() {
const handleMessage = (msg) => {
console.log("Received from Son:", msg);
};
return (
<div>
<h1>Parent Component</h1>
<Son onSendMessage={handleMessage} />
</div>
);
}
export default App;
子組件
import React from 'react';
function Son(props) {
const sendMessage = () => {
props.onSendMessage("Hello from Son!");
};
return (
<div>
<h2>Child Component</h2>
<button onClick={sendMessage}>Send Message to Parent</button>
</div>
);
}
export default Son;
2. 傳遞事件數(shù)據(jù)
子組件可以傳遞事件數(shù)據(jù)給父組件，通常用于處理用戶輸入或按鈕點(diǎn)擊。
示例
// 父組件
function App() {
const handleInputChange = (inputValue) => {
console.log("Input from Son:", inputValue);
};
return (
<div>
<h1>Parent Component</h1>
<Son onInputChange={handleInputChange} />
</div>
);
}
// 子組件
function Son(props) {
const handleChange = (event) => {
props.onInputChange(event.target.value);
};
return (
<div>
<h2>Child Component</h2>
<input type="text" onChange={handleChange} placeholder="Type something..." />
</div>
);
}3. 傳遞多個(gè)參數(shù)
子組件也可以通過回調(diào)函數(shù)傳遞多個(gè)參數(shù)給父組件。
示例
// 父組件
function App() {
const handleData = (name, age) => {
console.log("Received from Son:", name, age);
};
return (
<div>
<h1>Parent Component</h1>
<Son onSendData={handleData} />
</div>
);
}
// 子組件
function Son(props) {
const sendData = () => {
props.onSendData("John", 30);
};
return (
<div>
<h2>Child Component</h2>
<button onClick={sendData}>Send Data to Parent</button>
</div>
);
}總結(jié)：
- 回調(diào)函數(shù): 子組件通過調(diào)用父組件傳遞的回調(diào)函數(shù)來傳遞數(shù)據(jù)。
- 事件數(shù)據(jù)傳遞: 子組件可以通過回調(diào)函數(shù)向父組件傳遞事件數(shù)據(jù)，如用戶輸入。
- 多個(gè)參數(shù): 子組件可以通過回調(diào)函數(shù)傳遞多個(gè)參數(shù)給父組件。
三、使用Context機(jī)制跨層級(jí)組件通信:
App組件——A組件——B組件
1.創(chuàng)建上下文對象:在所有組件外部創(chuàng)建一個(gè)上下文對象
import React, { createContext } from 'react';
// 創(chuàng)建上下文對象
cosnt MsgContext = createContext()2.頂層組件提供數(shù)據(jù):在頂層組件通過Provider組件提供數(shù)據(jù)
// App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ComponentA from './ComponentA';
const App = () => {
const [data, setValue] = useState("Hello from Context!");
return (
<MyContext.Provider value={{ data, setData }}>
<h1>Top Level Component</h1>
<A />
</MyContext.Provider>
);
};
export default App;3.中間組件A組件(可選)
// ComponentA.js
import React from 'react';
import ComponentB from './ComponentB';
const ComponentA = () => {
return (
<div>
<h2>Component A</h2>
<B />
</div>
);
};
export default ComponentA;4.底層組件消費(fèi)數(shù)據(jù): 在底層組件中使用 useContext 鉤子獲取數(shù)據(jù)。
// ComponentB.js
import React, { useContext } from 'react';
import MyContext from './MyContext';
const ComponentB = () => {
const { value, setValue } = useContext(MyContext); // 獲取上下文
const changeValue = () => {
setValue('update from B'); // 更新上下文值
};
return (
<div>
<h3>Component B</h3>
<p>Data from Context: {data}</p>
<button onClick={changeValue}>更新值</button>
</div>
);
};
export default ComponentB;總結(jié)：
- 創(chuàng)建 Context: 使用
createContext創(chuàng)建上下文。 - 提供 Context: 使用
Context.Provider在頂層組件中提供數(shù)據(jù)。 - 使用 Context: 在子組件中使用
useContext鉤子訪問上下文。 - 更新 Context: 子組件通過調(diào)用更新函數(shù)來修改上下文的值。
到此這篇關(guān)于詳解React 中組件通信的幾種主要方式的文章就介紹到這了,更多相關(guān)React 組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React類組件和函數(shù)組件的所有核心區(qū)別及說明
這篇文章主要介紹了React類組件和函數(shù)組件的所有核心區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
詳解create-react-app 2.0版本如何啟用裝飾器語法
這篇文章主要介紹了詳解create-react-app 2.0版本如何啟用裝飾器語法，cra2.0時(shí)代如何啟用裝飾器語法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對象, 達(dá)到修改的目的2018-10-10
react-redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設(shè)置,需要的朋友可以參考下2022-08-08
react中關(guān)于函數(shù)調(diào)用()與bind this的原因及分析
這篇文章主要介紹了react中關(guān)于函數(shù)調(diào)用()與bind this的原因及分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了詳解React 的幾種條件渲染以及選擇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
React實(shí)現(xiàn)評(píng)論的添加和刪除
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)評(píng)論的添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內(nèi)部不起作用 - 它們允許你無需類就使用 React，本文帶領(lǐng)大家學(xué)習(xí)React 小技巧教你如何擺脫hooks依賴煩惱，感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了記React connect的幾種寫法(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
基于react框架使用的一些細(xì)節(jié)要點(diǎn)的思考
下面小編就為大家?guī)硪黄趓eact框架使用的一些細(xì)節(jié)要點(diǎn)的思考。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹了React+Ts實(shí)現(xiàn)二次封裝組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04