context

• 容器（即上下文） → 裝數據 → 可以傳遞到程序的多個地方
• 程序在執行時可訪問的容器

import styles from ...則css要寫module.css，否則無效果；
import from ...則css無須寫module. ，否則無效果

使用

• context.js

export const ThemeContext = React.createContext('red') // 這個是默認值

• main.jsx

import BottomNav from './BottomNav/index'
import Header from './Header/index'
import BtnGroup from './BtnGroup/index'
import { ThemeContext } from './context'
class Main extends React.Component {state = {navData: ['第①','第②','第③','第④',],theme: 'black'}changeTheme = (theme) => {this.setState({theme})}render() {return (<ThemeContext.Provider value={this.state.theme}><div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}><Header>標題</Header><BtnGroup changeTheme={this.changeTheme} /><BottomNavdata={this.state.navData}></BottomNav></div></ThemeContext.Provider>)}
}
export default Main

• Header組件

import './index.css'
import { ThemeContext } from '../context'class Header extends React.Component {render() {return (<ThemeContext.Consumer>{(theme) => {console.log('theme', theme);return (< header className={'title ' + `header-${theme}`} >{this.props.children}</header>)}}</ThemeContext.Consumer >)}
}
export default Header

• BtnGroup組件

// 注意方法的綁定
import './index.css'
class BottomNav extends React.Component {render() {return (< div style={{ display: 'flex', justifyContent: 'space-around', flex: 1, paddingTop: '44px' }}><button onClick={() => this.props.changeTheme('black')}>Black</button><button onClick={() => this.props.changeTheme('orange')}>Orange</button><button onClick={() => this.props.changeTheme('purple')}>Purple</button><button onClick={() => this.props.changeTheme('red')}>Red</button></div>)}
}
export default BottomNav

總結

① 提供: export const ThemeContext = React.createContext(‘red’)
② Provide組件包裹組件樹、傳遞value：<ThemeContext.Provider value={this.state.theme}></<ThemeContext.Provider>
③ Consumer使用theme（jsx + 回調函數參數為theme）