React開發——step4 跨组件传参数Context基础介绍

Context的意思就是上下文，它能帮助我们解决多级跨组件的变量共享问题。

API

• React.createContext
• Context.Provider
• Context.Consumer
• Class.contextType

React.createContext接收一个作为defaultValue的上下文参数，返回一个包含Provider和Consumer的对象。

const MyContext = React.createContext(defaultValue);

Context.Provider 负责提供和改变值，给Consumer来订阅。

<MyContext.Provider value={/* some value */}>

Context.Consumer 需要接收一个函数作为子节点。 该函数接收当前 context 值并返回一个 React 节点

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

Class.contextType
通过定义contextType=React.createContext(defaultValue)，就可以在这个类里面用this.context返回上下文的值。

  MyClass.contextType = MyContext;

demo

这里我们要实现一个语言切换的功能。

import React from "react"

const enStrings = {
    submit: "Submit",
    cancel: "Cancel"
}

const cnStrings = {
    submit: "提交",
    cancel: "取消"
}

// create an context object
const LocaleContext = React.createContext(enStrings) 

// LocaleProvider, change the value so that the consumer would be changed
class LocaleProvider extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            locale: cnStrings
        }
    }

    toggleLocale = () => {
        const locale = this.state.locale === enStrings ? cnStrings : enStrings
        this.setState({
            locale
        })
    }

    render () {
        return <LocaleContext.Provider value={this.state.locale}>
                <button onClick={this.toggleLocale}>切换语言</button>
                {this.props.children}
            </LocaleContext.Provider>
    }
}

// Consumer get the value from provider and follow the change
class LocaledButtons extends React.Component {
    render () {
        return <LocaleContext.Consumer>
            {
                locale => (
                    <div>
                        <button>{locale.submit}</button>&nbsp;&nbsp;&nbsp;
                        <button>{locale.cancel}</button>
                    </div>
                )    
            }
        </LocaleContext.Consumer>
    }
}


export default () => (
    <div>
        <LocaleProvider>
            <div>
                <br />
                <LocaledButtons />
            </div>
        </LocaleProvider>
    </div>
)