react 的 Context代替多层属性传值

 App.js

import React, {
  Component
} from "react";
import logo from "./logo.svg";
import "./App.css";
import ThemeContext from './theme-context';
import ThemedBar from './components/ThemedBar';

const themes={
  light:{
    className: 'btn btn-primary',
    bgColor  : '#eeeeee',
    color    : '#000'
  },
  dark:{
    className: 'btn btn-light',
    bgColor  : '#222222',
    color    : '#fff'
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state={
      theme: 'light'
    }
  }
  changeTheme(theme){
    this.setState({
      theme,
    })
  }
  render() {

    return ( 
      
          

           
          {this.changeTheme('light')}}>浅色主题
          {this.changeTheme('dark')}}>深色主题
          
          
      
    );
  }
}

export default App;

 

theme-context.js
 

import React from 'react';

const ThemeContext=React.createContext();

export default ThemeContext;

 

components文件下的 ThemedBar.js

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

const ThemedBar = () => {
  return (
    
      {theme => {
        return (
          

            样式区域
            样式按钮
          
          )
      }}
    
  );
};
export default ThemedBar;