React通過conetxt實現多組件傳值功能

Posted on by

該功能實現效果類似於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是否為響應式</button>
            <Theme.Provider value={theme}>
                <Child />
            </Theme.Provider>
        </>
    )
}

子組件獲取數據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>
    );
}

到此這篇關於React通過conetxt實現多組件傳值的文章就介紹到這瞭,更多相關React多組件傳值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：