使用context实现组件通信

richest_qi

已于 2022-06-06 14:11:19 修改

阅读量343

点赞数

分类专栏： React17/18 文章标签： context 组件通信类组件函数组件

于 2022-06-06 12:22:08 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/125141227

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

本文详细介绍了如何在 React 中使用 Context API 进行组件间的数据传递。通过一个基础样例，展示了从创建 context，到在祖组件中使用 Provider 组件传递数据，再到后代组件中通过 Consumer 或 contextType 获取数据的完整过程。文中提供了类组件和函数组件两种类型的后代组件接收数据的代码示例，并给出了相关链接以供深入学习。

摘要由CSDN通过智能技术生成

context是一种组件通信方式，常用于祖组件与后代组件间通信。

基础样例

新建react项目，主要包含以下文件：

模板文件index.html
入口文件index.js
入口组件App.js
component/Demo/index.jsx、components/Demo/index.css，即Demo组件

在这里插入图片描述

模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Context</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

ReactDOM.render(<App/>,document.getElementById("root"));

入口组件App.js

import React, { Component } from 'react'
import Demo from "./components/Demo"

export default class App extends Component {
  render() {
    return (
      <div>
          <Demo/>
      </div>
    )
  }
}

Demo组件

Demo/index.css

.a{
    width: 500px;
    background: orange;
    padding: 10px;
}
.b{
    background: skyblue;
    padding: 10px;
}
.c{
    background: lightgray;
    padding: 10px;
}

Demo/index.jsx

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

export default class A extends Component {
  state = {
    username:"张三"
  }
  render() {
    return (
      <div className="a">
        <div>我是组件A</div>
        <div>我的username是{this.state.username}</div>
        <B username={this.state.username}/>
      </div>
    )
  }
}

class B extends Component{
  render(){
    return (
      <div className="b">
        <div>我是组件B</div>
        <C username={this.props.username}/>
      </div>
    )
  }
}

class C extends Component{
  
  render(){
    console.log("this,",this);
    return (
      <div className="c">
        <div>我是组件C</div>
        <div>接收到的username是{this.props.username}</div>
      </div>
    )
  }
}

使用context传递数据

创建context对象：const MyContext=React.createContext()。
用context对象的Provider组件包裹祖组件，通过value属性传递数据给后代组件：<MyContext.Provider value={username}>子组件<MyContext.Provider>
后代组件获得数据。有以下两种方式，

第一种，使用context对象的Consumer组件：
<MyContext.Consumer>{ value => {} }</MyContext.Consumer>。

第二种，仅适用于类组件：
首先，声明本组件接收context对象传递过来的数据：static contextType = MyContext；
然后，通过this.context获取从祖组件传递过来的数据。

代码更改仅涉及文件：Demo/index.jsx

后代组件是类组件

第一种写法

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

const MyContext = createContext();
const {Provider,Consumer} = MyContext;

export default class A extends Component {
  state = {
    username:"张三"
  }
  render() {
    const {username} = this.state;

    return (
      <div className="a">
        <div>我是组件A</div>
        <div>我的username是{username}</div>
        <Provider value={username}>
          <B/>
        </Provider>
        
      </div>
    )
  }
}

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

class C extends Component{
  render(){
    return (
      <div className="c">
        <div>我是组件C</div>
        <Consumer>
          {
            value => <div>接收到的username是{value}</div>
          }
        </Consumer>
      </div>
    )
  }
}

第二种写法

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

const MyContext = createContext();
const {Provider} = MyContext;

export default class A extends Component {
  state = {
    username:"张三"
  }
  render() {
    const {username} = this.state;

    return (
      <div className="a">
        <div>我是组件A</div>
        <div>我的username是{username}</div>
        <Provider value={username}>
          <B/>
        </Provider>
        
      </div>
    )
  }
}

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

class C extends Component{
  static contextType = MyContext;
  render(){
    return (
      <div className="c">
        <div>我是组件C</div>
        <div>接收到的username是{this.context}</div>
      </div>
    )
  }
}

后代组件是函数组件

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

const MyContext = createContext();
const {Provider,Consumer} = MyContext;

export default class A extends Component {
  state = {
    username:"张三"
  }
  render() {
    const {username} = this.state;

    return (
      <div className="a">
        <div>我是组件A</div>
        <div>我的username是{username}</div>
        <Provider value={username}>
          <B/>
        </Provider>
        
      </div>
    )
  }
}

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

function C(){
  return (  
    <div className="c">
      <div>我是组件C</div>
      <Consumer>
        {
          value => <div>接收到的username是{value}</div>
        }
      </Consumer>
    </div>
  )
}