问题标签 [react-context]

假设我有一个用于处理应用程序逻辑的容器组件，它有很多方法：

我需要所有这些方法都可以被内部组件访问。我将在本例中使用上下文提供程序，我们只会说上下文被构成应用程序屏幕的各种嵌套表示组件使用。

要将方法传递给子组件或上下文提供程序值，您似乎总是不得不执行以下操作（请注意，在本示例中，我根据反应文档）。

我一直在寻找一种方法来避免一个一个地通过它们。我发现的一个可能的解决方案涉及使用 getter 并循环遍历类实例属性，如下所示：

然后我可以这样做：

如果需要，还可以将 getter 代码提取到实用函数中，以便在其他容器类型的组件中重用。显然，只有当有大量的方法需要传递时，这才是值得的。

它看起来很简单，只要在构造函数中完成就可以正常工作。这有什么疯狂的吗？以任何方式这是不好的做法，还是有任何我不知道的潜在副作用？有没有更好的方法我想念？

编辑

我已经更新了示例以更接近我的真实代码；它现在显示了这些方法可能会做什么样的事情，并使用上下文设置，而不是将方法作为道具传递给单个子组件。

我正在使用 react context api 在任何地方显示我的数据并从任何我想要的地方更新我的数据可以显示在多个屏幕上，并且我可以从多个类更新我需要在全球范围内使用它。

当我尝试从班级资料屏幕更新它时，什么也没有发生，但它可以从班级主屏幕更新。

如何在不使用这样的方式的情况下在消费者中显示我的数据，并在全球范围内显示这些数据

作为上下文提供者类的类主屏幕

我需要在许多屏幕上使用和显示的文本

另一个正在更改上下文提供程序数据的类

我正在尝试使用反应上下文在组件之间共享数据。首先尝试创建一个上下文并更新它。

我作为提供者的一部分包含的方法在我的消费者中不可用，但对象/变量可用..，很奇怪。我已经制作了一个要更新的状态和几种执行更新的方法。但消费者无法访问这些方法。这里是示例代码仓库：https ://codesandbox.io/s/k990k14k7

有人可以调查一下并帮助我吗？

我有一个在 html 页面上呈现多个根的应用程序。每个根在网站上呈现不同（或可能相同）的页面或组件。该应用程序包含一个 redux 商店，因为每个根共享同一个应用程序。为避免冲突，为每个根生成一个 redux 存储。

现在 redux 商店有惰性负载减速器。在加载代码拆分组件时添加减速器。

为了适应这种情况，商店中添加了一个函数来从 redux 调用 replaceReducer。

因此，当加载组件并且还需要加载减速器时，问题就出现了。该组件需要从 redux 提供者访问根存储。

这是使用旧的 react 上下文 api 中的 contextTypes 来访问商店来实现的。包装器组件中的 contextTypes 拉取存储的当前根实例。

但是使用新的 react context api，这似乎不兼容。建议是创建一个上下文文件并在任何子组件中使用它。这样做，我需要将商店放入反应上下文提供者值中。但是这样做意味着反应上下文将只保存 1 个商店实例。

如何使它像旧的 react contextTypes 一样工作以相应地访问根级别提供程序上下文？

我是 jest 和酶的新手，在测试使用 react 上下文 api 中的 prop 的 react 组件时遇到了一些 Invariant Violation 错误。我熟悉 Invariant Violation 错误及其可能的原因，但是，在这种情况下，我被困住了。一些建议非常感谢。这是一个仅用于演示目的的最小代码设置。我正在运行
“enzyme”：“3.7.0”、“enzyme-adapter-react-16”：“1.6.0”、
“jest”：“23.6.0”。

请注意，下面的代码可以正常工作，但是，只有在我尝试测试 MyComponent.jsx 时才会出现问题。

索引.jsx

我的组件.jsx

当我尝试像这样测试 MyComponent 时：

MyComponent.unit.test.js

这给了我以下错误：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App.

我正在尝试使用 TypeScript 在 React 中呈现上下文提供程序。

以下代码以非常简单的方式代表了我想要实现的目标。

一旦呈现此方法，就会显示此错误消息：

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。at invariant (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273) at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799) at ReactCompositeComponentWrapper. mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690) at Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868) at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:

我在其他类似问题中查找了该问题，但我得到的答案只是更新软件包。

我的软件包似乎是以下版本的最新版本：

有谁知道如何解决这个问题？

我正在尝试使用返回包装组件的 HOC 的新上下文 API。Class.contextType = Context当我使用这种方法时它不起作用：

但是，我制作了相同的代码，但使用<MyContext.Consumer>它并且效果很好：

我在这里没有看到什么吗？

我很难在上下文提供程序中设置 ref。这是不可能的还是我遗漏了什么？我能够以相同的方式在其他组件中创建Refs，但以下始终将 ref 显示为 { current: null }

然后我的应用程序就这样包装了

任何帮助表示赞赏！

下面的代码演示了我如何尝试使用反应钩子实现反应的上下文，这里的想法是我将能够轻松地从任何子组件访问上下文

首先，我创建了一个导出上下文和提供程序的文件。

这可行，但我在value提供者下方出现错误，可能是因为我在其中添加了操作，因此问题是，有没有办法让我保留所有类型的内容并仍然能够导出上下文和提供者？

我相信我也不能createContext放入我的主要功能，因为它会一直重新创建它？

[ts] 类型 '{ authState: { email: string; 密码：字符串；}; authActions: { setEmail: (email: string) => void; 设置密码：（密码：字符串）=> 无效；}; }' 不可分配给类型 '{ email: string; 密码：字符串；}'。对象字面量只能指定已知属性，并且 'authState' 不存在于类型 '{ email: string; 密码：字符串；}'。[2322] index.d.ts(266, 9)：预期类型来自属性“值”，该属性在此处声明类型为“IntrinsicAttributes & ProviderProps<{ email: string; 密码：字符串；}>' (property) authState: { email: string; 密码：字符串；}

我无法获取contextType作为新 React Context API 一部分的 React 属性。文件说：

可以为类的 contextType 属性分配一个由 React.createContext() 创建的 Context 对象。这使您可以使用 this.context 使用该上下文类型的最接近的当前值。您可以在任何生命周期方法中引用它，包括渲染函数。

除非我错过了什么，否则下面的代码应该this.context在课堂上可用App：

（此处为示例）

但是，当此代码运行时，日志语句只打印一个空对象。我希望它打印出我提供给React.createContext函数的默认状态。

有人可以帮我理解这里发生了什么吗？