import React from 'react'
export const themes = {
  pink: {
    foreground: '#ff65fa',
    background: '#ff65fa'
  },
  light: {
    foreground: '#eeeeee',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#000000',
    background: '#000000',
  },

};
export const ThemeContext = React.createContext(
    themes.dark //默认初始值
)

import React from 'react'
import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component{
  render() {
    let props = this.props;
    let theme = this.context;
    // console.log(props);
    console.log(theme);
    return(
        <button {...props} style={{backgroundColor: theme.background, width:'100px', height:'100px', marginBottom: '10px'}}/>
    )
  }
}
//也就是让以后可以使用this.context，此时ThemedButton已经拥有了context属性。
ThemedButton.contextType = ThemeContext;
//挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建
// 的 Context 对象。此属性能让你使用 this.context 来消费最近 Context 上的那个值。
// 你可以在任何生命周期中访问到它，包括 render 函数中。
export default ThemedButton;

import React from 'react'
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button'
//一个使用ThemedButton中间组件
function Toolbar (props) {
  return(
      <ThemedButton onClick={props.changeTheme} >
        改变主题
      </ThemedButton>
  )
}
class AppTheme extends React.Component{
  constructor (props) {
    super(props);
    this.state = {
      theme: themes.pink,
    };
    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }))
    }
  }
  render () {
    //在ThemeProvider内部的ThemedButton按钮组件使用state中的theme的值
    //而外部的组件使用默认的theme的值
    return(
        <div>
          <ThemeContext.Provider value={this.state.theme}>
            <Toolbar changeTheme={this.toggleTheme} />
          </ThemeContext.Provider>
          <div>
            <ThemedButton />
          </div>
        </div>
    )
  }
}
export default AppTheme;