问题标签 [react-context]

我试图迁移react-redux v5.X.X到v6.0.0并且似乎有任何文档。我正在使用以下版本： "react": "^16.4.2" "redux": "^4.0.0" "react-redux": "^6.0.0"

官方更改日志说。

不再支持将 store 作为 prop 传递给连接的组件。相反，您可以将自定义 context={MyContext} 属性传递给 和 。您也可以通过 {context : MyContext} 作为连接选项。链接在这里

这是我的根index.jsx

这是我的app.jsx（根组件）

根据我创建的更改日志context并将其传递给提供者

这是我render更改后的功能

传递store至props给出provider以下错误

在 props 中传递 redux store 已被删除，并且不执行任何操作。要为特定组件使用自定义 Redux 存储，请使用 React.createContext() 创建自定义 React 上下文，并将上下文对象传递给 React-Redux 的 Provider 和特定组件，例如：你也可以传递一个 {context : MyContext} 选项来连接

并传递为context给出以下错误

在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给 Connect(App)。

我没有找到任何文档，期望这个 redux 历史文档在这里它告诉了 react-redux 中问题的所有问题和解决方案以及上下文 api 如何修复它。但我不确定如何在实际项目中实际实施它。

有没有人面临同样的问题？或者你能告诉我如何准确地实施这个改变。

谢谢

所以我目前正在为反应上下文 API 编写一个 HOC，它将在上下文 api 消费者中包装组件。

我的要求是：

1. 需要维护对道具的完整类型检查
2. 我需要能够在将上下文 api 提供的状态作为道具添加之前对其进行子集化（这也需要完整的类型检查）

我目前拥有的代码是这样的（使用实用程序类型库）：

特设：

零件：

Diff 和 Intersection 从实用程序类型导入并在此处定义： https ://github.com/piotrwitek/utility-types

如果我可以稍微简化一下，或者不必将状态转换为未知，然后在回调的默认值中将其设置为 Y，那就太棒了。

有任何想法吗？

谢谢！

我正在使用 react-dom@16.6.1 和 react@16.6.1 应该支持 react并尝试运行一个与react-contextContext相同的简单示例：

应用程序.js

AppManger.js（没有上下文引用）

还有我想使用上下文的 SearchBar.js：

如果我运行应用程序，我会 Line 44: 'contextType' is not defined no-undef进入 SearchBar.js，如果我删除此行，我会{}在记录this.context.

我是 React 的初学者。查看一些中型文章和 React 文档（很复杂），我尝试实现这个非常基本的Context API。
我错过了一些基本点，这就是为什么我没有得到正确结果的原因，即通过组件树传递数据并在子组件中访问它们。
请让我知道如何更正 给定的代码片段以及我错过了什么。

我构建了一个大型应用程序，其中导航栏上的单个按钮打开一个模式。

我正在使用上下文 API 跟踪 modalOpen 状态。

因此，用户单击导航栏上的按钮。模态打开。Modal 有一个名为 QuoteCalculator 的容器。

报价计算器如下所示：

现在，一切都按预期工作。当用户提交时，我去正确的路线。我只是在控制台上看到以下警告

index.js:1446 警告：withRouter(QuoteCalculator)：函数组件不支持 contextType。

我很想忽略这个警告，但我认为这不是一个好主意。

我尝试使用 Redirect 替代。所以像

这种方法的问题是我不断收到错误

您尝试重定向到您当前所在的同一条路线

另外，我宁愿不使用这种方法，因为那样我就必须撤消完成状态（否则当用户再次单击按钮时，完成是真的，我们只会被重定向）......

知道 withRouter 和 history.push 发生了什么吗？

这是我的应用

我正在使用 this.context 在生命周期方法中获取上下文数据，但是当我不使用 Consumer 包装组件时，当上下文数据发生变化时，我的组件不会被重新渲染。

所以代替这个：

我需要使用这样的东西，以便在渲染之前格式化该数据：

但是这样一来，上下文更改后组件不会更新 - 上下文数据是异步的。

我做了研究，看到了这个例子，他们包装了导出并将上下文数据作为道具传递，但不确定这是否是使用最新上下文 API 的正确方法？

完整代码在这里。

public static contextType我通过声明使用上下文的组件内部来使用 react 的新上下文 API（v16.6.0 或更高版本） 。只要声明 的组件Provider不直接使用在其render()方法中使用上下文的组件，这就可以正常工作。

例子：

ParentWithContext

这是创建和提供上下文的组件。

请注意，该组件在其方法中使用了ChildOne组件（如下所示） 。render()

子一和子二

这两个组件只是简单地使用上述上下文并显示它。

索引.tsx

运行此示例将产生以下行：

所以ChildTwo似乎从 接收到正确的信息this.context，而ChildOne没有收到任何信息。

现在出现了奇怪的部分（对我来说）：当您从中删除时<ChildOne/>，ParentWithContext它突然对两者都ChildOne有效ChildTwo

新的 ParentWithContext

新的 HTML 输出

运行代码

问题

static contextType当Provider组件直接使用在其函数中使用上下文的子组件时，为什么上下文 API (>=v16.6) 不起作用（使用） render()？这是错误还是已知限制？我错过了什么？

附加信息

使用<SomeContext.Consumer>将按预期工作。

当然，这不是解决此问题的方法，但可能是有用的信息。

我正在尝试编写一个 React Context HOC 函数，以便我可以使用 Context 包装其他组件，从而允许我将所有通知发送到单个组件。我不得不从几个不同的指南中拼凑出一个可行的解决方案，主要是这个，因为它们都没有以原始形式完全工作。

我最终得到的是这样的：

特设：

语境：

ComponentHOC 文件在该行中的单词下方给了我一个红色下划线{value => <Component {...props} notificationContext={value} />}

错误如下：

类型 'R & { notificationContext: INotificationContextState | 无效的; }' 不可分配给类型 'IntrinsicAttributes & P & { children?: ReactNode; }'。类型 'R & { notificationContext: INotificationContextState | 无效的; }' 不可分配给类型 'P'.ts(2322)

奇怪的是，这个错误并没有阻止我运行应用程序，而且包装器功能完全按照它应该的方式工作，并且被包装的组件能够将通知传递给 Notification 对象。

我的部分麻烦是不熟悉省略/选择语法，并试图在精神上准确地弄清楚“P”的类型定义在这种情况下是什么。我只是不知道它为什么会产生错误，但仍然有效。

我正在尝试制作动态主题，但我遇到了问题。当我将 React.context 与 Provider 和 Consumer 一起使用时，我的应用程序不会在屏幕上显示任何内容。

这是我的 App.js

- 路线

-- 提供者类

-- 子组件

当我尝试运行应用程序屏幕是空白的。控制台没有警告。我不知道如何解决这个问题。

我有一个应用程序，登录后会获取用户详细信息，并且一些用户配置文件将具有公制设置，而其他用户配置文件将具有非公制（英制）。

我想在 React Context 中设置一个布尔值（isMetric），因为到处都有无状态的组件需要引用它，我想避免在整个组件层次结构中传递一个 isMetric 属性。

我一直在关注https://reactjs.org/docs/context.html上的 React 16 示例，所以我有一个unit-context.js：

和App.js一个

以上是在上下文本身中提供的动态模式，toggleUnits以便可以设置状态（上下文）。

使用上述模式，我已经确认在我的组件中我可以正常访问 isMetric 值。

但是我使用 redux-saga 来处理 api 调用，它正在检索用户的度量/非度量设置。

获取用户详细信息后，如何设置上下文？（redux-saga 似乎有它自己的上下文方面，但我指的是 React 上下文）。

一种选择是使用

import { UnitContext } from '.unit-context';

然后访问消费者以获取状态和功能。但我不确定如何在 redux-saga 传奇中引用通常是组件的命令式代码。

或者，我可以将 App 状态移动到 redux 吗？在 redux 商店中拥有一个功能似乎很奇怪和不合理。我知道 redux-saga 提供了select一种通过选择器访问 redux 存储的方法，我过去曾使用过它。

更新：

由于当时提供了上下文，<UnitContext.Provider value={this.state}>因此可以想象我可以用 redux 存储值替换该value属性设置，而不是使用本地状态。