React中組件通信的幾種主要方式
更新時間：2024年10月28日 10:25:46 作者：算是難了
React知識中一個主要內容便是組件之間的通信,以下列舉幾種常用的組件通信方式,通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
一、父傳子：
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 傳遞給子組件，子組件可以調用這個函數(shù)來與父組件進行交互。
示例
// 子組件
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. 使用默認值
為子組件的 props 設置默認值，使用 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 進行類型檢查。
示例
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ù)的主要方式是通過回調函數(shù)。父組件將一個函數(shù)作為 props 傳遞給子組件，子組件在需要時調用這個函數(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>
);
}總結：
- 多屬性傳遞: 父組件可以傳遞多個屬性給子組件。
- 函數(shù)作為 props: 父組件可以將函數(shù)傳遞給子組件，子組件可以調用這個函數(shù)與父組件進行交互。
- 默認值和類型檢查: 可以通過
defaultProps和PropTypes來確保 props 的完整性和正確性。 - 傳遞對象和數(shù)組: 可以將復雜的數(shù)據(jù)結構（如對象和數(shù)組）作為 props 傳遞。
二、子傳父：
子組件向父組件傳遞數(shù)據(jù)的主要方式是通過回調函數(shù)。父組件將一個函數(shù)作為 props 傳遞給子組件，子組件在需要時調用這個函數(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ù)
子組件也可以通過回調函數(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>
);
}總結：
- 回調函數(shù): 子組件通過調用父組件傳遞的回調函數(shù)來傳遞數(shù)據(jù)。
- 事件數(shù)據(jù)傳遞: 子組件可以通過回調函數(shù)向父組件傳遞事件數(shù)據(jù)，如用戶輸入。
- 多個參數(shù): 子組件可以通過回調函數(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;總結：
- 創(chuàng)建 Context: 使用
createContext創(chuàng)建上下文。 - 提供 Context: 使用
Context.Provider在頂層組件中提供數(shù)據(jù)。 - 使用 Context: 在子組件中使用
useContext鉤子訪問上下文。 - 更新 Context: 子組件通過調用更新函數(shù)來修改上下文的值。
以上就是React中組件通信的幾種主要方式的詳細內容，更多關于React組件通信方式的資料請關注腳本之家其它相關文章！
相關文章
React Hook 監(jiān)聽localStorage更新問題
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了關于react中列表渲染的局部刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在構建復雜的React應用時,組件之間的通信是至關重要的,從簡單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認識react組件通信的幾種方式,需要的朋友可以參考下2024-04-04
React實現(xiàn)二級聯(lián)動(左右聯(lián)動)
這篇文章主要為大家詳細介紹了React實現(xiàn)二級聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了React-Native 橋接iOS原生開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關資料,需要的朋友可以參考下2016-11-11
手挽手帶你學React之React-router4.x的使用
這篇文章主要介紹了手挽手帶你學React之React-router4.x的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要為大家介紹了React?模式之純組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了在react中使用mockjs的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React?Server?Component混合式渲染問題詳解
React?官方對?Server?Comopnent?是這樣介紹的:?zero-bundle-size?React?Server?Components，這篇文章主要介紹了React?Server?Component:?混合式渲染,需要的朋友可以參考下2022-12-12