React学习：context

爱明依

发布于 2019-04-27 20:56:04

3840

发布于 2019-04-27 20:56:04

文章被收录于专栏：爱明依爱明依

实现主题切换

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

五、查看效果：