21 react hooks 跨组件传值 Context

最新推荐文章于 2024-11-07 09:56:14 发布

weixin_45842460

最新推荐文章于 2024-11-07 09:56:14 发布

阅读量107

点赞数

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

本文链接：https://blog.csdn.net/weixin_45842460/article/details/128550104

版权

react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该文章介绍了如何在React应用中利用ContextAPI创建一个上下文空间，通过`createContext`和`useContext`Hook进行状态管理和共享，以及在子组件中通过`Provider`和`Consumer`来访问和更新状态。

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


import React, { createContext, useContext, useState } from 'react';
import deepCopy from '@/utils/deepCopy';
// 创建一个上下文空间，本质上是一个组件，首字母大写
const MsgContext = createContext(); //这个要单独在js文件中定义然后导出
export default function Parents() {

    let [num, setnum] = useState(10)
    return (
        // 把数据存放到上下文空间
        <MsgContext.Provider value={{ num, setnum }}>
            <div>
                <Child1 />
                <Child2 />
            </div>
        </MsgContext.Provider>
    )

}
// 方式1
function Child1() {
    //通过useContext从指定的空间MsgContext中获取值
    const msg = useContext(MsgContext)
    return (
        <>
            <div>{msg.num}</div>
            <div onClick={() => msg.setnum(20)}>add</div>
        </>
    )

}
//方式2
function Child2() {
    //通过useContext从指定的空间MsgContext中获取值
    const msg = useContext(MsgContext)
    return (
        <MsgContext.Consumer>
            {
                msg =>
                    <div>{msg.num}</div>
            }
        </MsgContext.Consumer>
    )

}