React通過conetxt實現(xiàn)多組件傳值功能

更新時間：2021年10月21日 14:29:11 作者：明知山_

Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實現(xiàn)多組件傳值功能，感興趣的朋友一起看看吧

該功能實現(xiàn)效果類似于vue的provide/inject
而React可通過context進(jìn)行完成

在這里插入圖片描述

定義一個公共的文件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中多語言的配置方式
這篇文章主要介紹了React中多語言的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
React使用emotion寫css代碼
這篇文章主要介紹了React如何使用emotion寫css代碼，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
2021-04-04
React內(nèi)存泄漏的常見原因及避免策略
內(nèi)存泄漏是指程序中分配的內(nèi)存未能正確釋放,導(dǎo)致內(nèi)存占用不斷增加,最終可能影響應(yīng)用性能甚至崩潰,在React中,內(nèi)存泄漏常發(fā)生于組件卸載后,本文將詳細(xì)介紹內(nèi)存泄漏在React中的常見原因及避免策略,需要的朋友可以參考下
2025-03-03
詳細(xì)談?wù)凴eact中setState是一個宏任務(wù)還是微任務(wù)
學(xué)過react的人都知道,setState在react里是一個很重要的方法,使用它可以更新我們數(shù)據(jù)的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于React中setState是一個宏任務(wù)還是微任務(wù)的相關(guān)資料,需要的朋友可以參考下
2021-09-09
React?Hooks useReducer?逃避deps組件渲染次數(shù)增加陷阱
這篇文章主要介紹了React?Hooks?之?useReducer?逃避deps后增加組件渲染次數(shù)的陷阱詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
React性能debug場景解決記錄
這篇文章主要為大家介紹了React性能debug場景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
React使用UI(Ant?Design)框架的詳細(xì)過程
Ant?Design主要用于中后臺系統(tǒng)的使用,它提供了豐富的組件和工具,可以幫助開發(fā)人員快速構(gòu)建出美觀、易用的界面,同時,Ant?Design還提供了詳細(xì)的文檔和示例,方便開發(fā)者學(xué)習(xí)和使用,這篇文章主要介紹了React使用UI（Ant?Design）框架,需要的朋友可以參考下
2023-12-12
React中常用的Hook有哪些
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-01-01
簡析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-09-09
react中history(push,go,replace)切換路由方法的區(qū)別及說明
這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10