React CreateContext 组件间通信除 redux ,mobx,redux-saga之外，本身具有的方法

使用场景

　　通常使用在一些组件间传值问题，但是主要是层级嵌套不深数据逻辑不复杂情况下数据传输。

使用方法

/**
 * 组件通信简单处理方式，
 * export const { Provider, Consumer } = React.createContext("");
 */
import React from 'react';
import { Button } from 'antd';

export const { Provider, Consumer } = React.createContext("");
class Child1 extends React.Component {
    render() {
        return (
            <Consumer>
                {(value) => {
                    return `class compoents value name : ${value.name} value age : ${value.age}`
                }}
            </Consumer>
        )
    }
}


const Child2 = () => {
    return (
        <Consumer>
            {(value) => {
                return `function compoents type : ${value.name} value age : ${value.age}`
            }}
        </Consumer>
    )
}

const CenterComp = () => {
    return (
        <div>
            <Child1 /><br/>
            <Child2 />
        </div>
    )
} 

class ContentComp extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            paytype: true
        }
    }
    render() {
        const { paytype } = this.state; 
        const _item =  paytype? {name: 'zhangsan',age: '15'}:{name: 'lisi',age: '18'};
        return (
            <Provider value={_item}>
                <CenterComp />
                <Button type="primary" onClick={() => this.setState({paytype: !this.state.paytype})}>点击更改状态</Button>
                <p>当前组件状态： {`${this.state.paytype}`}</p>
            </Provider>
        )
    }
}

export default ContentComp;