react 之 创建上下文（createContext）

问：创建上下文有什么用呢？
答：用于解决组件传值的问题。

问：组件传值不是已经存在方法了吗，不就是props传值吗？
答：您说的没错，props是可以传值，但是当父亲传值给儿子简单，就一层，如果是父亲传递给孙子，还有孙子的孙子呢？这么多层，是不是每层都得prop传递啊，是不是很乱，而且很累啊，而且很乱，不好写，createContext就是为了解决这个问题的，后面的reducx可能更好点

好了，我们直接上代码

import React, { Component } from 'react'
let store = {
    name: 'yangtao',
    from: '北京'
}
//创建上下文对象
const XdContext = React.createContext()
// 解构赋值，获取方法，Provider是传值方，Consumer是接收方
const { Provider, Consumer} = XdContext
function Info(props) {
    return (
        <Consumer>
            {
                store => {
                    return (
                        <div>
                            姓名：{store.name}
                            地区：{store.from}
                        </div>
                    )
                        
                }
            }
        </Consumer>
    )
}

// 儿子
function TolBar() {
    return (
        // 孙子
        <Info></Info>
    )
}

export default class Context1 extends Component{
    render() {
        return (
            <div>
                <Provider value={ store }>
                    <TolBar></TolBar>
                </Provider>
            </div>
        )
    }
}

标签：createContext,return,react,传值,props,孙子,上下文,store
来源： https://blog.51cto.com/u_14846736/2742760