17 初探Context的使用场景

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} />
                    <BottomNav
                        data={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）