问题标签 [react-context]

我正在尝试更流利地了解 React 如何传递信息，然后出现了这个测试用例：

我有一个由 Canvas 对象和不定数量的子对象组成的组件。我想让孩子们访问这个组件的画布上下文。

我想知道我是否可以给组件一个带有画布上下文的 React Context 并用它包装孩子，然后让各个孩子选择成为消费者。但是，我不习惯 React 或其生命周期，不知道如何正确地做到这一点。我完全没有了？这甚至可能吗？

这是有问题的组件：

现在，它包含一个孩子：

对此的帮助将不胜感激。

编辑：这是一个 Codepen：https ://codepen.io/ejpg/pen/XqvGdp

所以我遇到了臭名昭著的 React Router v4 警告：

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

这发生在包装我的组件之后，该组件本身<Route />在我的 HOC 内部呈现一个提供我的 React 上下文的内容。

这一切看起来有点像这样：

App.js：

我的stores.js文件包括以下内容：

myLayout.js：

我希望我在这里的整个情况有点清楚。有人可以向我解释为什么会出现警告吗？在我的整个应用程序中，我有类似的东西：<Route>...</Route>- 我一直在使用<Route {...rest} render={(props) => ( ... )} />！

所以我不知道为什么会这样。我必须处理我的withMainStoreHOC，因为当我删除它时，错误就消失了。但我仍然不明白为什么这会导致错误。

我正在使用 react-redux 进行状态管理并使用传递状态存储，provider但我不知道为什么它在我的提供程序组件的消费者部分中以未定义的形式出现

RightSLidePanel 组件

console.log 的结果是undefined.

我正在看一下 react context api，我决定尝试将其设置为处理登录弹出窗口：

在调用相关函数的 React 组件中使用。

我突然想到 LoginProvider 是一个视图模型。

这让我想知道：我是否正确使用了上下文功能？这是它的预期用途吗？

如果是这样，为什么用法如此陈旧？它提供什么好处？我的意思是它的代码比通过 redux 或 sagas 少，但仍然不必要地繁琐。

概括：

1）您知道如何在通过路由安装/卸载上下文提供程序时保持其状态吗？2) 或者您知道支持多个独立存储的维护良好的 Flux 实现吗？

详细地：

除了 React 组件自己的状态之外，到目前为止，我主要使用的是 redux。除了不喜欢让每个状态都在全球范围内管理的想法之外，即使它可能只与子树相关，它也成为我的新项目的一个问题。

我们希望动态加载组件并通过路由将它们添加到应用程序。为了能够让组件准备好即插即用，我们希望它们处理自己的状态（存储它，从服务器请求它，提供修改它的策略）。

我读到了如何使用 redux 动态地将 reducer 添加到全局存储中，但实际上我发现 Reacts Context API 的方法要好得多，我可以将一些状态封装在 Provider 中，并可以在我需要的任何地方使用它。

我唯一的问题是，Provider 和 Consumer 是 React 组件，所以如果它们是组件的一部分，通过路由安装和卸载，那么可能已经创建或获取一次的状态就消失了。

在我看来，除了暂时将状态存储在本地存储或服务器上之外，没有办法解决这个问题。有的话请告诉我！！！

如果不应该有更好的解决方案：

我还考虑了一个更原始的 Flux 实现，它允许多个存储，可以用相关的组件子树封装。但是除了 Redux 之外，我还没有真正找到任何维护良好的 Flux 实现。Mobx 是个例外，但我真的更喜欢 Redux 的 reducer 解决方案，而不是 Mobx 的 observable 解决方案。再说一次，如果您知道维护良好的多商店 Flux 实现，请告诉我！！！

对于一些反馈，我真的很高兴，并希望你能指出一个比动态 reducer Redux 或临时持久化的 Context 状态更令人满意的方向。

提前非常感谢！

以下适用于通过 NextJS 的 SSR。

我正在使用 React 的上下文来跟踪某些已安装组件的 ID。要点是

不幸的是，这只适用于客户端。this.state.mountedComponents始终[]在服务器上。是否有另一种方法可以在服务器端跟踪这些组件？基本上，我需要将 ID 提供给脚本以在head文档中运行 - 等待客户端应用程序安装、运行和手动附加到头部有点太慢了。

更新

这是一个简单的示例 repo：https ://github.com/tills13/nextjs-ssr-context

this.context在undefined的构造函数中Child，如果我将它移到componentDidMount（当前在 repo 中以这种方式设置），它可以工作，但我希望在服务器端解决这个问题。我没有死心塌地context，如果有其他方法可以做到这一点，我会全力以赴。

我一直在尝试理解新的 React Context API 并正在使用它。我只是想检查一个简单的案例 - 更新到 Provider 的数据时所有重新呈现的内容。

在 Codesandbox 上查看这个小例子

所以，在我的例子中，我有一个App组件——它的状态是这样的——

我从这里创建了一个新的 React 上下文，包含number和textfrom state，并将值传递给两个 ConsumersNumber和Text.

所以我的假设是如果随机数更新，它将改变上下文并且两个组件都应该触发重新渲染。

但实际上，值正在更新，但没有发生重新渲染。

所以，我的问题——

1. 是否更新到不通过通常的重新渲染传播的上下文？因为当上下文发生变化时，我看不到我的日志/颜色变化。

2. 该提供者的所有消费者是否都已更新？

我在响应中使用上下文 api 将数据传递给子组件。我遇到的问题是我需要使用从上下文传递的数据作为变量来运行 graphql 查询。我创建了一个 HOC 并成功地能够从渲染函数内的 props 访问数据，但我无法访问 graphql 查询中的值。

上下文.js

组件.js

所以我编写了一个提供程序来将字符串传递给我的应用程序的任何部分。我遇到的问题是，如果我向我的子组件添加一个字符串道具，它会覆盖整个道具并且似乎忽略了我在连接器中所做的合并

提供者

连接器

零件

单元测试运行

我不确定我在这里遗漏了什么，但字符串似乎在连接器中更新但在组件中没有更新，是不是我做错了什么？

我对 React 比较陌生，所以这可能是一件非常简单的事情。

基本上，我一直在尝试使用 Context 操作模态。我已经设置了我的上下文（一个单独的文件）：

将它导入到我的组件中（使用 VS2017，所以我得到了 Intellisense）：

尝试在 render 方法中实现它：

但是，我收到了这种美丽：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

现在，我知道有很多类似的帖子，但我找到的解决方案都没有。实际上，他们中的大多数都指向不正确的导入，这里不应该是这种情况。

我的反应依赖：

1. “反应”：“^16.4.1”，
2. “反应域”：“^16.4.1”，
3. "react-hot-loader": "3.0.0-beta.7",
4. “反应模式”：“3.1.13”，
5. "react-router-dom": "4.1.1",
6. "@types/react": "^16.3.18",
7. "@types/react-dom": "^16.0.6",
8. "@types/react-hot-loader": "3.0.3",
9. "@types/react-modal": "3.1.1",
10. "@types/react-router": "4.0.12",
11. "@types/react-router-dom": "4.0.5",
12. “打字稿”：“2.9.1”

总而言之，知道是什么原因造成的吗？

PS。对于那些不珍惜生命的人，我附上堆栈跟踪。

编辑：_renderUrlsTable 代码：