React属性之context属性

最新推荐文章于 2024-03-07 15:34:46 发布

六卿

最新推荐文章于 2024-03-07 15:34:46 发布

阅读量572

点赞数 1

分类专栏： # react 文章标签： react context createContext

本文链接：https://blog.csdn.net/qq_43291759/article/details/121608129

版权

react 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

这篇博客展示了如何使用React的createContext API来实现组件间的通信。通过创建一个自定义上下文，爷爷组件传递数据给孙子组件，中间的爸爸组件作为消费者，接收并传递这些数据。例子中详细阐述了Provider和Consumer的用法，以及静态属性contextType的使用。

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

定义：

在这里插入图片描述

例子：

import React from 'react'


let MyContext = React.createContext()


class Grand extends React.Component {
    static contextType = MyContext
    render() {
        const { username, age } = this.context
        return (
            <div style={{ padding: "10px", backgroundColor: "pink" }}>
                我是孙子组件，我爷爷的名字是{username},他的年龄是{age}岁;
        </div>
        )
    }
}

function Child(props) {
    return (
        <div style={{ padding: "10px", backgroundColor: "green" }}>
            <MyContext.Consumer>
                {value => `我是爸爸组件，我爸爸的名字是${value.username},他的年龄是${value.age}岁;`}
            </MyContext.Consumer>
            <Grand />
        </div>
    )

}



export default function Key() {

    let [username] = React.useState('张三丰');
    let [age] = React.useState('88');

    return (
        <div style={{ padding: "10px", backgroundColor: "red" }}>
            我是爷爷组件，我的姓名是：{username},我的年龄是{age}岁;
            <MyContext.Provider value={{ username, age }}>
                <Child />
            </MyContext.Provider>

        </div>
    )
}