问题标签 [react-context]

我为我的 react 应用程序创建了一个布局组件，我想在路线更改时动态更新侧边栏和导航栏。

1. 我可以使用 redux，但所有状态和方法都将随时可用，即使我不需要它们。

2. 我还查看了新的 react 上下文，但它与 redux 有相同的问题。

3. 使用反应路由器，看起来我只是在安装一个新的侧边栏或导航栏。

有没有办法为我的布局组件动态提供新的状态和方法？
（将状态替换为不同的状态，或多个新的一次：apple --> orange）

React 路由器看起来是我最好的选择，但我可以通过在每个新路由中包含侧边栏和导航栏来做同样的事情。

动态添加链接不是问题，添加一个影响新挂载组件的按钮才是问题。导航栏和侧边栏位于父组件中，因此它们需要了解所有状态和方法。

谢谢，

编辑：

例子：

- 首页 - 关于 - 联系方式

没问题，有链接。我可以使用 switchComponet 方法将链接组件替换为任何其他组件。

停止 - 加速 - 帮助

这些都是按钮。现在我需要将它们的方法和状态添加到 Layout 组件中。如果应用程序增长，则需要将更多状态和方法添加到顶部组件。我可以将它们全部放在 redux 中，但所有状态和方法始终可用。我可能对redux有错误的印象，我认为它可能会占用很多资源，但我可能错了。

我正在将 React 添加到现有的 web 应用程序中。现在，我选择性地替换页面的某些部分，在不同的 div 中呈现不同的组件。出于这个原因，我没有一棵挂在所有组件上的树。我想使用一个上下文提供程序在所有这些组件之间共享上下文信息，但由于我没有一棵树，我不能让它们都挂在同一个上下文提供程序上。

有没有办法使用这样定义的默认上下文？

并且没有提供者挂起哪些组件，而只有消费者？

它适用于默认值，但是我不知道如何更改此默认上下文的值。

我的理解是否正确，这适用于所有从供应商处挂靠的消费者？或者有没有办法以编程方式设置默认上下文的值？还有另一种方法可以解决这个问题吗？

我曾经有这样的组件：

这个测试：

但是现在我已经向这个对象添加了一个上下文使用者：

如何测试以下条件？

• “#user”的数量是1
• 显示的用户是提供的用户

我正在尝试在我的 ract-native 应用程序中关联 api。但我收到了这个错误。 TypeError：TypeError：无法读取未定义的属性“编号”。我的代码有什么问题？

appContext.js

homeScreen.js

环境

环境：操作系统：macOS High Sierra 10.13.4 节点：8.11.3 纱线：未找到 npm：5.6.0 Watchman：4.9.0 Xcode：Xcode 9.2 Build 版本 9C40b Android Studio：3.1 AI-173.4907809

包：（需要 => 已安装）反应：^16.4.2 => 16.4.2 反应原生：0.55.4 => 0.55.4

描述

我正在编写一个自定义的原生 android 库，它公开了一个支持片段以供显示。我在 react 的 android 端创建了一个简单的视图管理器，在其中我返回一个占位符布局（只是父线性布局内的一个框架布局，稍后用片段布局替换），createViewInstance然后打算receiveCommand在用户操作中添加库片段从反应方面。但是，为了将片段添加到容器中，我无法从ThemedReactContext我捕获的 obj 中获取支持片段管理器createViewInstance。这样做会themedReactContextObj.getCurrentActivity()产生弃用的android.app.FragmentManager. 我如何android.support.v4.app.FragmentManager在我的视图管理器中获取？任何帮助表示赞赏。

这是我正在使用的代码，基于 SO 和博客上的一些解决方案，以显示本地片段。如果我使用 aandroid.app.Fragment来显示而不是android.support.v4.app.Fragment：

由于不推荐使用 getFragmentManager()，我如何从 ThemedReactContext 获取支持片段管理器？

所以，我有两个组件，一个永远是另一个的直系后代。我想将道具从父组件传递给子组件。可能有多个子组件。有两种方法可以实现它。

或使用上下文 API

两者都会产生相同的 DOM 结构，但是，Context API 的代码会稍微多一些，并且会产生更多的 React 组件。

那么哪一个更注重性能和推荐。我找不到与此比较相关的任何讨论，因此在这里询问。

我正在构建一个站点，其中包含很多反应组件，但不是 SPA 或完整的反应站点。因此反应组件被拉入页面。当各种菜单的打开或下拉菜单出现时，我有一个覆盖 Ui 的覆盖组件。我遇到的问题是我已经像这样设置了我的上下文：

然后我将此提供者和消费者传递给 2 个不同的组件：

1. 我的覆盖组件
2. 我的 MyAccount 组件。

它们在这里： 叠加层：

我的帐户：

当我调用 value.showHideOverlay(e); 从 MyAccount.js 它更新上下文中的状态，但它不会将此更改转发到基于此布尔值的道具“showOverlay”样式的 Overlay.js。如果我在我的帐户中放了一个测试道具，它就会得到改变。如果我从 Overlay.js 触发事件，也会发生同样的事情。覆盖层内的道具从上下文中的状态更新，但不是 MyAccount.js 中的那个

我猜我可能对多个提供者做错了什么，但我的印象是多个提供者对反应上下文 API 绝对没问题。

任何方向表示赞赏！

Application is built on Node/React/Express.

I have a table component and then a sub component for each row in the table that is generated dynamically from an array (clients) which is collected from the db by a react context api call and stored in state. I then map over the array and create a row (Client component) for each client.

On each of these rows is a button that can activate or deactivate the client's account.... now that the array (client list) is up to 1000 records, it's taking a solid 3 seconds to activate or deactivate the account and reflect the changes.

I'm looking for a) any issues with doing it how I'm doing it, b) suggestions for speeding up this process and optimizing the code, c) is Redux a better option for this? Or, I guess, d) do I have unrealistic expectations and I should just add a loading spinner and call it good?

在阅读了有关上下文的官方文档（https://reactjs.org/docs/context.html）之后，我觉得它的使用应该主要限于当我们有一些我们可以考虑“全局”的变量的情况下，我们必须发送到不同嵌套级别的许多组件（如当前主题、语言环境、当前经过身份验证的用户）。

Context 旨在共享可被视为 React 组件树“全局”的数据，例如当前经过身份验证的用户、主题或首选语言。

和

上下文主要用于在不同嵌套级别的许多组件需要访问某些数据时。谨慎应用它，因为它使组件重用更加困难。

我想使用 Context 来促进组件树中彼此相距较远的组件之间的通信。许多用户为此使用了 Redux（尽管这不是它的主要目的），这并没有同样令人沮丧，即使与 React 一起使用（通过 react-redux 包）这种方法在内部由 Context 提供支持。

Context 与 redux + react-redux 相比有什么缺点（除非 Redux 有不同的更新状态的方式），这应该让我在所描述的场景中不使用 Context 吗？文档说它使组件重用变得更加困难。它是如何做到的，这个 con 不是也与 redux + react-redux duo 有关吗？

我正在尝试在我的 React Native 应用程序中使用 React 的新 Context api（使用 Expo）。但是我得到一个错误。请注意，当我尝试将 Context.Provider 抽象为组件时，我只会收到此错误。
这是我的 UserContext.js 代码：

这是我的 App.js 代码的一部分，我在其中使用了 UserContextProvider。请注意，这是我的应用程序的根目录：

我以下列方式在我的屏幕（或组件）中使用 UserContextConsumer。请注意，当我导航到以下代码所在的屏幕时会引发错误：

我收到以下错误：

如果您需要更多信息，请告诉我。您的帮助将不胜感激。

谢谢你。