context的使用

//context.js
import React from 'react'
//创建context的实例
const myContext = React.createContext()
export default myContext;

//app.js
import myContext from './context'

function App(props) {
    //提供生产者，并传入value属性
    return (<myContext.Provider value={{name: 'xiaomi', age: '17'}}>
        <Header/>
    </myContext.Provider>)
}

//title.js
import myContext from '../context'

function Header(props) {
//在孙组件title里面消费context，而不用通过header这个子组件
    return (<myContext.Consumer>
        {(context) => <p>name:{context.name} age:{context.age}</p>}
    </myContext.Consumer>)