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