React学习：context

最新推荐文章于 2024-11-10 09:45:00 发布

原创最新推荐文章于 2024-11-10 09:45:00 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何在React应用中实现主题切换功能，包括定义轻暗两种主题、创建并使用Context进行状态管理，以及如何在组件中消费这些主题设置，实现动态样式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现主题切换

一、定义2中不同主题

const themes = {
    light: {
        classnames: 'btn btn-primary',
        bgColor: 'red',
        color: '#000'
    },
    dark: {
        classnames: 'btn btn-light',
        bgColor: '#blue',
        color: '#fff'
    },
}

二、定义Context；

import React from 'react'

const ThemeContext =React.createContext()

export default ThemeContext

三、使用context.Provider


   render() {
        return (
            <ThemeContext.Provider value={themes.light}>
                <div className="App">
                    <header className={"App-header"}>
                        <img src={logo} className={"App-logo"} alt={"logo"}/>
                        <h2>欢迎来到矿洞程序员</h2>
                        <a href="#theme-switcher" className="btn btn-light" onClick={()=>{this.changeTheme('light')}}>浅色主题</a>
                        <a href="#theme-switcher" className="btn btn-secondary" onClick={()=>{this.changeTheme('dark')}}>深色主题</a>
                    </header>
                    <ThemeBar/>
                </div>
            </ThemeContext.Provider>
        );
    }

四：定义样式消费组件

import  React from  'react'
import ThemeContext from './Theme-context'

const ThemeBar = () =>{
    return (
        <ThemeContext.Consumer>
            {
                theme=>{
                    // console.log(theme)
                    return (
                        <div className="alert mt-5" style={{backgroundColor:theme.bgColor,color:theme.color}}>样式区域
                         <button>样式按钮</button>
                        </div>
                     )
                }
            }
        </ThemeContext.Consumer>
    )
}
export default ThemeBar

五、查看效果：