父組件

import React, { Component } from 'react';
import {themeContext, theme} from './theme-context';
import ThemeButton from './theme-button';

export default class echarts3 extends Component {
    constructor(p){
        super(p);
        this.state = {
            theme: theme.light
        };
    }
// 中間組件
    Toolbar(p) {
        return (
            <ThemeButton onClick={p.chamgeTheme}>
                改變主題
            </ThemeButton>
        );
    }
    toggleTheme = ()=>{
        this.setState(state=>({
            theme: state.theme === theme.dark ?
            theme.light : theme.dark
        }));
        // console.log('點(diǎn)擊');
    }
    render() {
        return (
        <div>
            <themeContext.Provider value={this.state.theme}>
                  <this.Toolbar chamgeTheme={this.toggleTheme}/>
            </themeContext.Provider>
        </div>
        );
    }
}

子組件

import React from 'react';
import {themeContext} from './theme-context';

function ThemeButton(props) {
    return (
        <themeContext.Consumer>
            {
                theme =>(
                    <button
                    {...props}
                    style={{backgroundColor: theme.background}}
                    />
                )
            }
        </themeContext.Consumer>
    );
}
export default ThemeButton;

存放數(shù)據(jù)的文件

import React from 'react';

export const theme = {
    light: {
        foreground: '#ffffff',
        background: '#222222'
    },
    dark: {
        foreground: '#000000',
        background: '#eeeeee'
    }

};
export const themeContext = React.createContext(theme.dark);

點(diǎn)擊按鈕可以切換背景顏色