React中Provider组件详解(使用场景)

class A extends React.Component {
  state = { name: 'A'  }
  render(){
    return (
    <div>
        <B name={this.name.name}>
    </div>)
  }
}

// B组件
class Father extends React.Component {
  render(){
    return (
    <div>
        <C age={this.props.name}> 
    </div>)
  } 
}

// C组件
class C extends React.Component {
  render(){
     return (
     <div>
        {this.props.name}
      </div>
  } 
}

// A组件
import Provider from './provider'
import B from './B';
 <Provider info={{name:'max', age: 13}}>
    <B/>
 </Provider>

// 简单的Provider组件
import React, { Component,Children } from 'react';
import PropTypes from  "prop-types" 
import A from './A'
export default class Provider extends React.Component {
  static  childContextTypes = {
    store: PropTypes.object.isRequired
  };
  constructor(props){
      super(props)
      this.store = {...props}
  }
  getChildContext(){
    return {store:this.store}
  }
  render(){
      return (
      <div>
          {this.props.children}
      </div>)
  }  
}

 // C组件
import React, { Component } from 'react';
import PropTypes from  "prop-types"
export default class C extends React.Component {
  // 必须要申明，react认为全局变量不好
  static  contextTypes = {
    store:PropTypes.object.isRequired
  };
  render(){
      return (
      <div>
          <h1>{this.context.store.info.age}</h1>  // 这里直接获取provider提供的属性值
      </div>)
  }
}