当前位置：首页 > news >正文

react组件间通信之context

news 2025/8/28 2:39:57

一般用于【祖组件】与【后代组件】间通信

案例：

A,B,C,D四个组件的关系分别为：爷爷，爸爸，儿子，孙子
从A向C传递参数：C组件为类式组件
从A向D传递参数：D组件为函数组件

import React, { Component } from 'react'
import './index.css'/*** 【祖组件】与【后代组件】间通信*/// 创建Context容器对象：
const MyContext = React.createContext()
const {Provider,Consumer} = MyContextexport default class A extends Component {state = {name:'sun',age:18}render() {const {name,age} = this.state;return (<div className='one'><h5>A组件</h5><div>我的名字是：{name}</div>{/* 渲染子组件时，外面包裹Provider，通过value属性给后代组件传递参数 */}<Provider value={{name,age}}><B></B></Provider></div>)}
}class B extends Component {render() {return (<div className='two'><h5>B组件</h5><C></C></div>)}
}/*** 后代组件读取数据* 方式一：仅使用于类组件*/
class C extends Component {// 第一步：声明接受contextstatic contextType = MyContext;render() {return (<div className='three'><h5>C组件</h5>{/* 第二步：读取context中的value数据 */}<div>C组件从A组件拿到的名字是：{this.context.name}</div>        <D></D></div>)}
}/*** 后代组件读取数据* 方式二：函数组件与类组件都可以*/
function D(){return(<div className='four'><h5>D组件</h5><div>D组件从A组件拿到的名字是：<Consumer>{value => `${value.name}，年龄是：${value.age}。`}</Consumer></div></div>)
}

样式文件：

.one{width: 500px;background-color: red;padding: 20px;
}
.two{width: 90%;background-color: orange;padding: 20px;
}
.three{width: 90%;background-color: yellow;padding: 20px;
}
.four{width: 90%;background-color: green;padding: 20px;
}