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）