React学习：context

我就是我 2022-02-19 12:39 211阅读 0赞

实现主题切换

一、定义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

五、查看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70]: /images/20220219/1f3d8a746a654918a74e66a6797851d6.png