5. 全局Context状态注入和路由菜单处理

[haokur]

step1.新建全局上下文文件

• contexts/app.context.ts

导出的updateAppConfig没什么用,但又不得不导出?
可能的原因是,这里只是作为定义接收,类似vue中的props,
而实际产生作用的是在根元素,传入的使用useState生成的appConfig和updateAppConfig
导出一个AppInitialData作为初始化数据

import { createContext } from "react";

export const AppInitialData = { isSidebarOpen: true }

export const AppContext = createContext({
    appConfig: AppInitialData,
    updateAppConfig: (ev: any) => { ev }
})

step2.根元素上,提供注入

• AppContext.Provider

import { useState } from 'react'
import { AppContext, AppInitialData } from 'contexts/app.context.ts'

const AppContainer = () => {
    const [appConfig, updateAppConfig] = useState(AppInitialData)
    return (
        <AppContext.Provider value={{ appConfig, updateAppConfig }}>
            <App />
        </AppContext.Provider>
    )
}
ReactDOM.createRoot(rootElement).render(AppContainer)

step3.页面中使用

import { useContext } from 'react'
import { AppContext } from 'contexts/app.context.ts'

const TestPage = () => {
    const { appConfig, updateAppConfig } = useContext(AppContext)

    const toggleStatus = () => {
        updateAppConfig({
            ...appConfig,
            isSidebarOpen: !appConfig.isSidebarOpen
        })
    }

    return (
        <div>
            <span>当前状态:{appConfig.isSidebarOpen}</span>
            <button onClick={toggleStatus}>切换状态</button>
        </div>
    )
}