react扩展6_Context

最新推荐文章于 2024-02-23 15:45:37 发布

原创最新推荐文章于 2024-02-23 15:45:37 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在React中使用Context API进行组件间的通信。在类式组件中，通过创建并使用Provider将状态传递给任何子组件；而在函数式组件中，可以利用Consumer来获取上下文中的数据。示例展示了在A、B、C三个组件间如何通过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>
      )
    }