react-context跨组件通信（类组件）

最新推荐文章于 2023-08-23 18:02:41 发布

TomHe789

最新推荐文章于 2023-08-23 18:02:41 发布

阅读量700

点赞数

分类专栏： react 文章标签： react.js javascript 前端

转载请说明文章详细出处

本文链接：https://blog.csdn.net/weixin_44120487/article/details/121799640

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

context跨组件通信（类组件）

通过使用Provider生产数据，Consumer消费数据

import React, { Component } from "react";

const IndexContext = React.createContext({});
// 创建生产者容器组件 消费者容器组件
const { Provider, Consumer } = IndexContext;

// 子组件
class Son extends Component {
  render() {
    return (
      {/* 使用生产数据 */}
      <Consumer>
        {(value) => {
          return (
            <div>
              <p>{value.name}</p>
              <p>{value.age}</p>
            </div>
          );
        }}
      </Consumer>
    );
  }
}

// 父组件
class Father extends Component {
  render() {
    return (
      <div>
        <Son />
      </div>
    );
  }
}

// 祖先组件
export default class Demo extends Component {
  render() {
    return (
      {/* 生产数据 */}	      
      <Provider value={{ name: "tom", age: 22 }}>
        <Father />
      </Provider>
    );
  }
}

创建Context对象时给定数据

import React, { Component } from "react";
// 创建Context对象时 给定默认值
const IndexContext = React.createContext({ name: "peter", age: 18 });

// 子组件
class Son extends Component {
  render() {
    return (
      <div>
        <p>{this.context.name}</p>
        <p>{this.context.age}</p>
      </div>
    );
  }
}
// 指定组件context类型
Son.contextType = IndexContext;

// 父组件
class Father extends Component {
  render() {
    return (
      <div>
        <Son />
        <p>{this.context.name}</p>
        <p>{this.context.age}</p>
      </div>
    );
  }
}

Father.contextType = IndexContext;

// 祖先组件
export default class Demo extends Component {
  render() {
    return <Father />;
  }
}