问题标签 [react-context]

我试图了解 ReactJs 上下文，并最终在显示状态名称和 countNumber 方面取得了一些进展。

但是，我仍在努力解决如何替换当前状态，该状态在我的 formatCount() 函数中使用。

谁能在下面的示例中告诉我您将如何做到这一点？

我想在我的上下文中使用数字，例如方法 formatCount() 中的 5，所以它类似于

这是我的上下文

这是我的计数器组件

使用 ReactJs 上下文，我在导航栏中显示了一个计数值。我不希望在值为 0 时显示它，但是我无法弄清楚如何实现这一点。

基本上在 CounterContext.Consumer 内部我想添加一个 if 语句以仅在计数器 > 0 时显示

这是我的代码片段

我是第一次使用 Context API，我在理解如何在生命周期方法中更新上下文时遇到了一些困难。我查看了官方文档和这个答案，这很有意义，但对我找到解决方案没有多大帮助。

我现在有 2 个组件：一个父母和一个孩子。

在父级中，我在 componentDidMount() 中使用 axios get() 请求来获取数据。

孩子使用上下文来呈现元素，因此一旦请求完成，它就需要更新的上下文。

我的主要问题是一旦收到 axios 响应，我就无法找到更新提供程序状态的位置。理想情况下，我想将 axios 响应分配给提供者状态，但我不知道如何从那里访问上下文。

我通过将 axios 响应分配给父状态然后通过我的 Provider 的处理程序更新上下文提供程序状态并在我的 Consumer 下的 render() 中调用此处理程序来使其“工作”，因为这是我相信我拥有的唯一地方访问上下文：

但是我知道这不是正确的实现，因为在 render() 中更新是一种反模式。

在生命周期方法中更新提供者状态的最佳方法是什么？

我有一个需要道具height并被width渲染的功能组件。让我们称之为PureSizableDiv：

我还有一个名为的 React 上下文Size：

而不是像这样手动创建新的 HoC：

我想知道是否有更短更清洁的方法recompose来执行此操作。我试过了

但是得到了错误Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我正在开发一个 React 组件库，它允许通过将对象数组和<input/>as 属性传递给<SearchFilter/>组件来进行客户端数据过滤。我想将过滤后的结果返回到一个单独 <SearchResults/>的组件，该组件可以在树的其他地方呈现（即结果组件不必是输入组件的子组件）。

我已经弄清楚了过滤，但我不确定在 React 中获取过滤数据到<SearchResults/>组件的最佳途径。

这就是我想结束的...

然后，使用 Render Props 返回数据并映射到返回 JSX，就会有结果组件。像这样的东西...

这就是我想要实现的目标，因为我希望允许<SearchFilter/>在树中的一个地方渲染组件，并允许在其他地方<SearchResults/>渲染组件，这样树的组成方式以及因此如何视图被渲染。

我已经查看了 Context API，但似乎需要更多的组件才能成为我的库的一部分，这使我想要实现的目标更加复杂。如果这是解决它的唯一方法，那很好，但我想问一下，看看是否有人能想到另一种解决方案。

谢谢！

我想使用unstated.js（React 上下文包装器）使用来自 api 调用的数据简单地初始化容器状态。

我看到了一个例子，其中 Container 是用几个 var 实例化的：

如果我想获取一些 api 数据以传递到此容器的状态 - 这是正确的方法吗？或者我应该从父组件传递道具？这是为了在首次加载时将数据加载到 SPA 中。

我试图理解一个使用上下文 api 的高阶组件的例子，这里使用。

因为，我对反应和函数式编程还很陌生，所以我不明白这里的实际情况如何。我们正在向函数发送一个函数，该函数withUser返回另一个接收props.

因此，当我们创建时，UserAvatar我们传递接收props, 并返回的函数img。

所以，基本上在这之后我们可以想象UserAvatar是：

在哪里Component：

我希望到目前为止这是正确的，但是我不明白的是这一行：

props当我们已经拥有并且正在从组件向下传递user到组件时，为什么我们需要将其作为函数而不只是返回组件？UserAvatarUserStats

在来自 Unstated 库的示例中，它们通过与订阅容器的 jsx 按钮交互来更新容器内的状态。

有没有办法从容器外部组件中的函数更新容器内的状态？因此，例如，如果我想在返回承诺期间更新状态，我将如何去做。伪代码

我正在试验反应上下文 API，这是我正在处理的代码：

渲染方法中的“提供者”引发以下错误：

"JSX element type 'ReactElement<any> | null' is not a constructor function for JSX elements.Type 'null' is not assignable to type 'ElementClass"

在反应声明文件中'Provider'已被声明，我认为它已被正确声明，或者我可能错了！

我正在使用以下版本：

我们正在处理这个项目，在这个项目中我们扮演着不同的角色，比如业务、用户、组织。为此，我们为角色设置了不同的选项卡。

在单击我们要绑定组织列表的每个选项卡时，目前我们正在重复获取每个文件上的组织列表的代码，这不是最佳实践，因此我们使用了上下文 API，这将使其更加健壮，以使用单个代码文件来获取组织列表。

一切正常，但是，从列表中删除组织后，我无法设置道具。这是代码：

上下文.js

List.js

用户.js

我已经创建了上下文并在 user.js 中定义<Provider>并在 list.js 中访问<Consumer>显示所有组织。

现在我删除了一些组织，它正在从数据库中删除，但是，列表没有得到更新，一旦我刷新删除记录消失的页面，我就可以看到旧值。

现在我想在上下文中发送更新的组织，但不获取道具。

如何设置获取上下文的道具？

我正面临从消费者状态更新到提供者状态。