React通過conetxt實現(xiàn)多組件傳值功能
更新時間：2021年10月21日 14:29:11 作者：明知山_
Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實現(xiàn)多組件傳值功能，感興趣的朋友一起看看吧
該功能實現(xiàn)效果類似于vue的provide/inject
而React可通過context進行完成
定義一個公共的文件context/Theme.jsx
import { createContext } from 'react';
const theme = createContext()
export default theme
父組件引入公共文件及子組件
并傳遞theme值
import React, { useState } from 'react';
import Child from "@/components/Child.jsx"
import Theme from "@/context/Theme.jsx"
export default () => {
const [theme, setTheme] = useState("blue")
return (
<>
<button onClick={() => setTheme("green")}>檢驗context是否為響應(yīng)式</button>
<Theme.Provider value={theme}>
<Child />
</Theme.Provider>
</>
)
}
子組件獲取數(shù)據(jù)components/Child.jsx
import React from 'react';
import Theme from "@/context/Theme.jsx"
export default () => {
return (
<Theme.Consumer>
{data => <p>接收父組件context傳遞的值：{data}</p>}
</Theme.Consumer>
);
}
到此這篇關(guān)于React通過conetxt實現(xiàn)多組件傳值的文章就介紹到這了,更多相關(guān)React多組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
在開發(fā)過程中，總是遇到很多列表的顯示。當上數(shù)量級別的列表渲染于瀏覽器，終會導(dǎo)致瀏覽器的性能下降，你可以選擇其他方式避免，本文就介紹了虛擬列表來解決這個問題2021-05-05
connect()是React-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，下面這篇文章主要給大家介紹了react-redux中connect()方法的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
React腳手架config-overrides.js文件的配置方式
這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了一文詳解React?Redux使用方法，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了react如何向數(shù)組中追加值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了React中immutable的UI組件渲染性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了React虛擬渲染實現(xiàn)50個或者100個圖表渲染的實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
React Fiber中面試官最關(guān)心的技術(shù)話題
這篇文章主要為大家介紹了React Fiber中面試官最關(guān)心的技術(shù)話題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
react中使用redux-persist做持久化儲存的過程記錄
這篇文章主要介紹了react中使用redux-persist做持久化儲存的相關(guān)資料,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01