react context(上下文方法使用)

//定义
const defaultValue = 'aaa';
const LocaleContext = React.createContext(defaultValue);

//父组件
class LocaleProvider extends React.Component{
    state = {
        locale: defaultValue
    }
    render(){
        return (
            <LocaleContext.Provider value={this.state.locale}>
                <button onClick={()=>this.setState({locale: 'bbb')})} >
                    切换
                </button>
                {this.props.children]
            </LocaleContext.Provider>
        )
    }
}

//子组件
class LocaledButtons extends React.Componet{
    render(){
        return (
            <LocaleContext.Consumer>
                {locale => (
                    <div>
                        <span>{locale}</span>
                    </div>
                }
            </LocaleContext.Consumer>        
        )
    }
}

//实际使用
export default () => (
    <LocaleProvider>
        <LocaledButtons />
    </LocaleProvider>
)