该功能实现效果类似于vue的provide/inject
而React可通过context进行完成

定义一个公共的文件context/Theme.jsx

import { createContext } from 'react';
const theme = createContext()
export default theme

父组件引入公共文件及子组件
并传递theme值

import React, { useState } from 'react';
import Child from "@/components/Child.jsx"
import Theme from "@/context/Theme.jsx"
export default () => {
    const [theme, setTheme] = useState("blue")
    return (
        <>
            <button onClick={() => setTheme("green")}>检验context是否为响应式</button>
            <Theme.Provider value={theme}>
                <Child />
            </Theme.Provider>
        </>
    )
}

子组件获取数据components/Child.jsx

import React from 'react';
import Theme from "@/context/Theme.jsx"
export default () => {
    return (
        <Theme.Consumer>
            {data => <p>接收父组件context传递的值：{data}</p>}
        </Theme.Consumer>
    );
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• ErrorBoundary组件处理react异常怎样做

  这篇文章主要介绍了一个处理react异常的ErrorBoundary组件,简单实用,代码详细,对这个组件感兴趣的朋友可以参考下

• 微信小程序播放音频的实现代码是什么

  这篇文章主要为大家详细介绍了微信小程序实现播放音频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用jQuery怎样判断是否有余数，用什么方法？

  这篇文章给大家分享的是用jQuery怎样判断是否有余数的内容，也就是进行除法运算时，判断是否整除，对大家学习if语句有一定的帮助，小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• Pinia.js状态管理器的基本用法是怎样，具有什么特点

  这篇文章主要为大家介绍了Pinia.js状态管理器上手使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• angularjs循环对象属性优缺点是什么，怎么实现

  这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下