React中組件通信的幾種主要方式
更新時間：2024年10月28日 10:25:46 作者：算是難了
React知識中一個主要內(nèi)容便是組件之間的通信,以下列舉幾種常用的組件通信方式,通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
一、父傳子：
1. 傳遞多個屬性
父組件可以通過 props 傳遞多個屬性給子組件。
示例
// 子組件
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)用這個函數(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 驗證
使用 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ù)。父組件將一個函數(shù)作為 props 傳遞給子組件，子組件在需要時調(diào)用這個函數(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é)：
- 多屬性傳遞: 父組件可以傳遞多個屬性給子組件。
- 函數(shù)作為 props: 父組件可以將函數(shù)傳遞給子組件，子組件可以調(diào)用這個函數(shù)與父組件進(jìn)行交互。
- 默認(rèn)值和類型檢查: 可以通過
defaultProps和PropTypes來確保 props 的完整性和正確性。 - 傳遞對象和數(shù)組: 可以將復(fù)雜的數(shù)據(jù)結(jié)構(gòu)（如對象和數(shù)組）作為 props 傳遞。
二、子傳父：
子組件向父組件傳遞數(shù)據(jù)的主要方式是通過回調(diào)函數(shù)。父組件將一個函數(shù)作為 props 傳遞給子組件，子組件在需要時調(diào)用這個函數(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ù)給父組件，通常用于處理用戶輸入或按鈕點擊。
示例
// 父組件
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. 傳遞多個參數(shù)
子組件也可以通過回調(diào)函數(shù)傳遞多個參數(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ù)，如用戶輸入。
- 多個參數(shù): 子組件可以通過回調(diào)函數(shù)傳遞多個參數(shù)給父組件。
三、使用Context機制跨層級組件通信:
App組件——A組件——B組件
1.創(chuàng)建上下文對象:在所有組件外部創(chuàng)建一個上下文對象
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.底層組件消費數(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ù)來修改上下文的值。
以上就是React中組件通信的幾種主要方式的詳細(xì)內(nèi)容，更多關(guān)于React組件通信方式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中父組件如何獲取子組件的值或方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
FormData 是一個非常靈活的工具,適用于處理表單數(shù)據(jù),特別是在需要發(fā)送文件或復(fù)雜表單數(shù)據(jù)時,本文給大家介紹React中FormData的使用示例詳解,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了React中key的作用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
在React中,我們使用map方法對數(shù)組進(jìn)行循環(huán)渲染,并生成對應(yīng)的jsx結(jié)構(gòu),為了確保React的diff算法可以正確地處理dom對象,我們需要為每個生成的元素添加key屬性,注意：雖然不添加key屬性代碼可以運行,但會報錯2026-05-05
React學(xué)習(xí)之受控組件與數(shù)據(jù)共享實例分析
這篇文章主要介紹了React學(xué)習(xí)之受控組件與數(shù)據(jù)共享,結(jié)合實例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下2020-01-01
react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件
本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了React key值的作用和使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React中事件綁定的5種實現(xiàn)方式和優(yōu)劣對比全攻略
在React中,事件綁定不僅僅是把函數(shù)和元素連接起來那么簡單,它關(guān)系到很多方面,下面我們就來一起來看看React事件綁定的5種主要方式,以及它們各自的優(yōu)缺點吧2026-01-01
react-native 實現(xiàn)購物車滑動刪除效果的示例代碼
這篇文章主要介紹了react-native 實現(xiàn)購物車滑動刪除效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
React-Router(V6)的權(quán)限控制實現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05