react组件间通信之context

种草小幺儿.2023-11-09 8:31

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

案例：

A,B,C,D四个组件的关系分别为：爷爷，爸爸，儿子，孙子

从A向C传递参数：C组件为类式组件

从A向D传递参数：D组件为函数组件

javascript 复制代码

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

/**
 * 【祖组件】与【后代组件】间通信
 */

// 创建Context容器对象：
const MyContext = React.createContext()
const {Provider,Consumer} = MyContext

export 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 {
    // 第一步：声明接受context
    static 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>
    )
}

样式文件：

javascript 复制代码

.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;
}

运行效果：