React学习（八）：Context 编码 - 主题切换

阿里云服务器0元试用，首购低至0.9元/月起
【开发云】年年都是折扣价，不用四处薅羊毛
前置内容阅读 React学习（七）：Forms(表单)增强 - 留言本
效果预览

1. 环境准备

// 启动工程
npm start

// index.js 中引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'

2. 编写组件

a. 修改 src\App.js

import logo from './logo.svg';
import './App.css';
// 引入Context
import ThemeContext from './theme-context';
import ThemedBar from './componets/ThemedBar';

const themes = {
  light: {
    classNames: 'btn btn-primary',
    bgColor: '#eeeeee',
    color: '#fff'
  },
  dark: {
    classNames: 'btn btn-light',
    bgColor: '#222222',
    color: '#fff'
  }
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: 'light'
    }
    this.changeTheme = this.changeTheme.bind(this)

  changeTheme(theme){
    this.setState({
      theme,
    })
  }
  
  render() {
    return (
      <ThemeContext.Provider value={themes[this.state.theme]}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
          <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>
          <ThemedBar />
        </div>
      </ThemeContext.Provider>
    );
  }
}
export default App;

b. 新建 src\componets\ThemedBar.js

import React from "react";
import ThemeContext from "../theme-context";

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

c. 新建 src\theme-context.js

import React from "react";

const ThemeContext = React.createContext()

export default ThemeContext

d. 效果呈现 点击主题按钮实现主题内容切换