在组件外部访问React上下文
基础概念
React 上下文（Context）提供了一种在组件树中共享数据的方式，而不必显式地通过组件树的每一层传递 props。它允许你在组件外部访问某些全局状态或配置。
相关优势
- 避免 props drilling：不再需要通过中间组件一层层传递 props。
- 全局状态管理：方便地共享全局状态，如主题、用户认证信息等。
- 性能优化：通过使用
React.memo或useMemo，可以避免不必要的重新渲染。
类型
- 创建 Context：使用
React.createContext创建一个新的 Context。 - 提供者（Provider）：使用 Context 的 Provider 组件包裹需要访问该 Context 的组件树，并通过 value 属性传递数据。
- 消费者（Consumer）：使用 Context 的 Consumer 组件或
useContextHook 在组件内部访问 Context 数据。
应用场景
- 主题切换：如黑暗模式和亮色模式的切换。
- 用户认证：在应用的任何地方访问用户的登录状态。
- 国际化：根据用户的语言偏好显示不同的文本。
访问 React 上下文
在组件外部访问 React 上下文通常不是推荐的做法，因为上下文的设计初衷是为了在组件树中共享数据。然而，如果你确实需要在组件外部访问上下文，可以通过以下方式实现：
- 使用 Refs：通过创建一个 ref 并将其附加到 Provider 组件上，然后在外部通过 ref 访问 Provider 的实例。
import React, { createContext, useRef } from 'react';
const MyContext = createContext();
function App() {
const contextRef = useRef();
return (
<MyContext.Provider value={{ theme: 'dark' }}>
<div ref={contextRef}>
{/* 其他组件 */}
</div>
</MyContext.Provider>
);
}
// 在外部访问
console.log(contextRef.current.props.value); // { theme: 'dark' }- 使用自定义 Hook：创建一个自定义 Hook 来返回 Context 的值，然后在需要的地方调用这个 Hook。
import React, { createContext, useContext } from 'react';
const MyContext = createContext();
function useMyContext() {
return useContext(MyContext);
}
function App() {
return (
<MyContext.Provider value={{ theme: 'dark' }}>
<div>
{/* 其他组件 */}
</div>
</MyContext.Provider>
);
}
// 在外部访问
const contextValue = useMyContext();
console.log(contextValue); // { theme: 'dark' }遇到的问题及解决方法
问题：在组件外部访问 Context 时，值为空或未更新
原因：Context 的值在 Provider 组件外部是不可见的，或者 Provider 的 value 没有正确更新。
解决方法：
- 确保 Provider 包裹了需要访问 Context 的组件树。
- 使用
useMemo或useCallback来优化 Provider 的 value，确保它只在必要时更新。
import React, { createContext, useMemo } from 'react';
const MyContext = createContext();
function App() {
const theme = useMemo(() => 'dark', []);
return (
<MyContext.Provider value={{ theme }}>
<div>
{/* 其他组件 */}
</div>
</MyContext.Provider>
);
}通过以上方法，你可以在组件外部访问 React 上下文，并解决相关的问题。
相关·内容
2回答
我正在使用Jest和React-testing-library来测试React组件。我已经使用上下文API提供程序呈现了一个组件，因此该组件可以访问上下文。不幸的是，我不知道如何从渲染组件外部访问它。在本例中，上下文中有一个isUserLogged属性，具体取决于组件的更改。但是我不知道如何改变这个属性的值。我该如何处理这个案例呢？如果需要模拟<
浏览 25提问于2019-02-18得票数 2
回答已采纳
我正在使用React 16，并尝试使用React钩子来访问上下文。const { locale } = React.useContext(LocaleContext);
这个钩子调用是在Redux中间件中完成的。有没有办法让我从功能组件外部访问上下文？
浏览 11提问于2020-05-25得票数 0
1回答
我正在使用React context来存储NextJS网站的区域设置(例如example.com/en/)。设置如下： components/Locale/index.jsx import React from 'react';
import Locale from '..现在，在我的一个页面
浏览 23提问于2019-01-14得票数 9
一旦react编译了代码，有没有办法监听React组件的呈现事件？document.querySelector('#myButton').addEventListener('render', function(){})PS:我意识到R
浏览 4提问于2020-06-15得票数 0
1回答
成功登录后导航到profile页面，但是它会产生错误，如下所示：
import Reactfrom 'react';import { connect } f
浏览 0提问于2019-03-19得票数 0
但是，我如何访问外部的历史反应组件呢？在中，它在一个React组件的上下文中，但是这里我尝试在axios上下文中 // Do
浏览 7提问于2017-04-04得票数 44
回答已采纳
1回答
我希望将react应用程序分开，这样我就可以在运行时从外部.js文件加载任何逻辑(例如conteners / components)。目前，我在主react应用程序中添加了一个组件：目前，我可以在主应用程序中导航到以下路径：
Custom/Fi
浏览 4提问于2022-01-31得票数 0
我有一个react上下文，它被用作跨多个组件的提供者。，但它似乎只来自于夹在<Context.Provider>之间的某种类型的React组件
并且useConte
浏览 4提问于2019-11-03得票数 1
我问了这个问题，如何将一个函数从React公开给外部的HTML：Use React in CMS and expose functions to HTML to access useState functionsin React因为我找不到一个纯函数的解决方案，所以我用类试了一下，因为在类中有' this‘，我可以绑定到窗口。import React from 'react';
import MyContext from '..<
浏览 48提问于2020-07-17得票数 0
回答已采纳
大家好，我正在尝试构建React上下文菜单组件，这是我的代码目前的样子：import React, { useRef, useEffectcontext-menu" onBlur={handleBlur}> </div> }下面是外部组件</em
浏览 0提问于2020-03-19得票数 0
我已经创建了一个可以在任何地方使用的上下文，我想知道我们是否可以在纯类型记录类中使用这个上下文及其值。public async method1() { } ...}const { total, cartItems } = useContext(CartContext);export class Util
浏览 9提问于2021-06-07得票数 0
回答已采纳
3回答
正如问题中所述，我想调用在另一个组件中声明的函数。renderTableData = (startId) => { }如何从另一个组件访问
浏览 4提问于2022-07-13得票数 1
回答已采纳
1回答
我希望制作一个更高级的组件来管理外部点击。当确定用户已在给定组件外部单击时，应执行某个传递的函数。这个临时参数包含两个参数：
import React from 'react'
c
浏览 1提问于2017-05-04得票数 0
1回答
我有一个外部组件(传单地图)。这个组件有很多孩子。应用程序根据状态、路线等在地图上绘制不同的内容。使用传单(或仅仅是Map)组件(如路径、标记等)要求我在地图中直接呈现它们，因此上下文是可用的(Marker调用挂载上的map实例，等等)。我试图用Portals来解决这个问题，但是它不起作用，因为React在上下文之外呈现子元素，只在内部呈现DOM项目。所以我需要这样的东西:门户组件，它一直在Map中
浏览 0提问于2019-05-31得票数 4
我发现了一篇很棒的文章，将身份验证添加到react中。文章：
本文使用一个即席组件完成了firebase设置(在redux之前)，我可以将该组件放入应用程序中，并且可以通过上下文访问该组件。我的问题是如何将其放入apollo客户端，它位于应用程序组件的外部，所以即使有上下文，我也无法设置它。我对redux也有同样的问题。我发现只有一个是使用本地存储，但我想避免这种情况。这是我的apollo客户端的主要应用程序
浏览 2提问于2018-06-25得票数 3
我正在使用新的React Context API，并且我需要从Context.Consumer变量中获取消费者数据，而不是在render方法中使用它。有没有办法让我做到这一点？举例说明我想要什么：到目前为止我测试了什么:上面的例子，测试了Context.Consumer currentValue和上下文消费者的其他变量
浏览 2提问于2018-04-17得票数 28
如何从history中访问mapDispatchToProps支柱更清楚的是，如何从react-routermapDispatchToProps方法中访问connect上下文</em
浏览 1提问于2018-12-07得票数 0
我真的很好奇connect函数如何计算出我的状态所在的位置？它与combineReducer的功能有什么关系吗？它是否正在从中获取返回值？
浏览 3提问于2017-11-08得票数 0
现在，我希望有一个可以跨所有组件访问的上下文：上下文链接到主应用程序组件的状态。这种状态确实会发生变化，因此对于组件来说，上下文的值也应该发生变化。我在app组件中放置了一个div，并将它的值链接到this.state中，这确实
浏览 0提问于2018-12-01得票数 7
回答已采纳
我正在处理一个主要使用React组件构建的React项目。最近，团队决定开始转向带有钩子的功能组件。
函数组件和类组件是否有方法访问相同的上下文？换句话说，如果我有一个设置为类/由类组件消费的上下文提供程序，那么我可以使用一个向下流函数组件来访问和更新这个上下文吗？同样的问题则相反(设置提供程序来使用useContext()钩子并通过类组件</e
浏览 3提问于2021-02-19得票数 0
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
