react 的 Context代替多层属性传值

àì夳堔傛蜴生んèń 2022-03-28 11:10 142阅读 0赞

###  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 ( 
          <ThemeContext.Provider value={themes[this.state.theme]}>
              <div className = "App" >
               
              <a className='btn btn-light' onClick={()=>{this.changeTheme('light')}}>浅色主题</a>
              <a className='btn btn-secondary'  onClick={()=>{this.changeTheme('dark')}}>深色主题</a>
              </div>
              <ThemedBar/>
          </ThemeContext.Provider>
        );
      }
    }
    
    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 (
        <ThemeContext.Consumer>
          {theme => {
            return (
              <div
                className='alert mt-5'
                style={
       {backgroundColor:theme.bgColor,color:theme.color}}>
                样式区域
                <button className={theme.classname}>样式按钮</button>
              </div>
              )
          }}
        </ThemeContext.Consumer >
      );
    };
    export default ThemedBar;