react中context用法

react中经常会用到组件之间相互传值，父组件给子组件传值通过props,子组件给父组件传值则需要在父组件中定义一个方法，有时react中组件之间的关系非常复杂，并非父子关系，有时他们还交叉着许多其他组件，那么这时候组件之间怎么传值呢？context解决了这样的难题。下面是一个测试例子：其核心代码是 React.createContext，顾名思义是创建一个context,Provider，顾名思义是值的传递方，Consumer，消费者，顾名思义是指的获取方，如果一个组件需要用到Provider提供的值，只需要用Consumer包裹一下就可以了。
Footer/index.js

import React from 'react'
import './index.less';
import Child from '../child';
export const {Provider,Consumer} = React.createContext("default");
export default class Footer extends React.Component {
    render() {
        const name ="context值";
        const scope = '应用';
        return (
            //Provider共享容器 提供name值
            <Provider value={name, scope} >
                <React.Fragment>
                    <h3>父组件传递的name值:{name}与{scope}</h3>
                    <Child />
                </React.Fragment>
            </Provider>
        );
    }
}

child/index.js

import React from 'react';
import { Consumer } from "../Footer";
import GrandChild from "../grandchild";
function Child(props) {
    return (
        //通过Consumer容器,接收name属性
        <Consumer>
            {( name, scope ) =>
                <React.Fragment>
                    <h3>子组件。获取Footer组件传递下来的值:{name}与{scope}</h3>
                    <GrandChild />
               </React.Fragment>
            }
        </Consumer>
    );
}
export default Child;

grandChild/index.js

import React from 'react';
import { Consumer } from "../Footer";//引入父组件的Consumer容器
function GrandChild(props) {
    return (
        //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {( name, scope ) =>
                <h3>孙组件。获取Footer组件传递下来的值:{name}与{scope}</h3>
            }
        </Consumer>
    );
}
export default GrandChild;

效果为：