React传值之context

context是全局上下文传值，React提供了createContext方法，结构出Provider和Consumer两个组件 Provider用于发送数据，Consumer用于接受数据，具体使用方法见代码

import React from "react"
import ProviderContext from "/ProviderContext"   

const {Provider} = ProviderContext;
class App extends React.Component{ //爷爷组件
    constructor(){
        super();
        this.state={
            user:{
                name:"冰花",
                age:23,
                sex:"男"
            }
        }
    }
    render(
        <div>
            <Provider value={this.state.user}> //Provider的value属性用来接受数据然后将数据传递给Consumer组件
                <Father/> //父组件
            </Provider>
        </div>
    )
}
-----------------------------------------------------------------------
function Father (){
    return(
        <Son/> //孙子组件
    )
}
------------------------------------------------------------------------
import ProviderContext from "/ProviderContext" 

function Son(){
const {Consumer} = ProviderContext;
    return(
        <div>
        <Consumer> //Consumer组件内部必须是函数，可以使用函数返回一个<div></div>,将数据展示出来
            {context => {
                return(
                    <div>
                        <p>姓名： {context.name}</p>
                        <p>年龄： {context.age}</p>
                        <p>性别： {context.sex}</p>
                    </div>
                )
            }}
        </Consumer>
        </div>
    )
}
------------------------------------------------------------------------

此时想在Son组件中使用App组件的数据，就必须做到跨级传递数据，React提供了createContext可以实现跨级传递

import React from "react"
export default React.createContext();
// 创建一个返回React.createContext()的文件，只要使用上下文传递就可以调用该文件，返回Provider和Consumer用于跨层级的组件数据传递，创建文件可以保证解构出来的Provider和Consumer能对应上，如果每个文件内部都自己进行解构，那么设置的Provider和接受数据Consumer就不能对应上。