【React】useContexts使用

创建需要共享的context

interface IThemeProps {
  [key: string]: {color: string; background: string;}
}
const themes: IThemeProps = {
 'light': {
   color: '#000',
   background: '#eee',
 },
 'dark': {
    color: '#fff',
    background: '#222',
  }
}
export const ThemeContext = React.createContext(themes.light)

class App extends React.Component {
  render() {
   // 第二步：使用 Provider 提供 ThemeContext 的值，Provider所包含的子树都可以直接访问ThemeContext的值
    return (
      <ThemeContext.Provider value={themes.dark}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

在子组件中引入

import React, { useState, useEffect, useRef, useContext } from 'react'
import { ThemeContext } from '../App'

// 获取
const theme = useContext(ThemeContext)