react扩展6_Context

这一节我们学习组件间通信中比较重要的一点：Context。

类式组件

在类式组件中我们需要将第一个子组件用MyContext.Provider包住。这样就可以不打扰中间组件，在任何子组件中都可以获取到想使用的变量啦。
注意：这一种方式只有类式组件能够使用。

父组件

子组件

完整代码

  import React, { Component } from 'react'
  import './index.css'

  const MyContext=React.createContext();  
  const {Provider}=MyContext
  export default class A extends Component {
    state={username:'jack',age:18}
    render() {
      const {username,age}=this.state
      return (
        <div className='parent'>
          <h1>我是A组件</h1>
          <div>我的用户名是：{this.state.username}</div>
          <Provider value={{username:username,age:age}}>
            <B/>
          </Provider>
        </div>
      )
    }
  }

  class B extends Component {
      render() {
        return (
          <div className='child'>
            <h1>我是B组件</h1>
              <C/>
          </div>
        )
      }
    }

    class C extends Component {
      //声明接收constext
      static contextType=MyContext
      render() {
        return (
          <div className='grand'>
            <h1>我是C组件</h1>
            <div>我的用户名是：{this.context.username},年龄是{this.context.age}</div>
          </div>
        )
      }
    }

函数式组件

上面的方法在函数式组件中无法使用，但是有一种方法在类式组件和函数式组件中都能够使用。
父组件
和上一种方式相比，我们使用到了一个Consumer

子组件

整体代码

  import React, { Component } from 'react'
  import './index.css'

  const MyContext=React.createContext();  
  const {Provider,Consumer}=MyContext
  export default class A extends Component {
    state={username:'jack',age:18}
    render() {
      const {username,age}=this.state
      return (
        <div className='parent'>
          <h1>我是A组件</h1>
          <div>我的用户名是：{this.state.username}</div>
          <Provider value={{username:username,age:age}}>
            <B/>
          </Provider>
        </div>
      )
    }
  }
  
  class B extends Component {
      render() {
        return (
          <div className='child'>
            <h1>我是B组件</h1>
              <C/>
          </div>
        )
      }
    }

    function C(){
      return(
        <div className='grand'>
            <h1>我是C组件</h1>
            <h4>我从A组件接收到的用户名：
              <Consumer>
                {value=>`${value.username},年龄是${value.age}`}
              </Consumer>
            </h4>    
        </div>
      )
    }