react Context

1、 父组件

父组件：
import PropTypes from 'prop-types'

  // 声明Context对象属性
  static childContextTypes = {
    propA: PropTypes.string,
    methodA: PropTypes.func
  }
  
  // 返回Context对象，方法名是约定好的
  getChildContext () {
    return {
      propA: 'propA',
      methodA: () => 'methodA'
    }
  }

子组件：Ï

 // 为了在子组件中抓取context, 我们需要告诉React我们想要访问context
    // 我们通过在子组件中定义 contextTypes 和 React交流
    static contextTypes = {
        users: PropTypes.array
    }
    render(){
    const {users} = this.context
    }

 方式2:react16.3之后有了新的方法

父组件
// export const { Provider, Consumer } = React.createContext("默认名称");

<Provider value={{background:red}}>
        <div style={{ border: '1px solid red', width: '30%', margin: '50px auto', textAlign: 'center' }}>
          <p>父组件定义的值:{camera}</p>
          <Parent />
        </div>
      </Provider>
      <Parent />Ï

自组件
import { Consumer } from "./index";//引入父组件的Consumer容器
           <Consumer>
        {(context) =>
          <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
            <p>子组件。获取父组件的值:{context}</p>
            {/* 孙组件内容 */}
            <Child></Child>
          </div>
        }
      </Consumer>