问题标签 [react-modal]

我的 react-native 应用程序有几种情况可以呈现不同的模式。我想知道实现这一目标的最佳方法是什么。一般来说，我看到两种不同的方法：

a） 在根视图上，我总是Modal安装 -component 并简单地切换内容，就像这样......

b)每个模态都有自己的Modal-component 并安装在树中的某个位置，靠近触发它的位置。

您更喜欢哪种方式，为什么？

适用于这两种方法的一个问题是，是否Modal应该始终安装 -component 并且只使用visible-prop 触发。如果这是要走的路，我假设方法 b) 需要更多内存，因为创建了Modal-component 的多个实例。

所以我得到了一个这样的对话框React-Modal：

这很好用，但现在当我把它连接到一张桌子上时，我正在为每个项目创建 1 个模式，对吗？

表格行：

当我打开所说的 Modal 时，如何确保只创建一个 Modal 并更改对象？

使用React,React-Router和React-Modal.

如果我有这些路线：

我在UnitPlants组件内部打开一个模态

我的打开和关闭看起来像这样：

然而，当我关闭我的模式时，http://localhost:3000/UnitPlants?plantName=&productType=1&createdAt=2016-06-02&expiresAt=由于某种原因它导航到我似乎无法弄清楚究竟是为什么。

如何阻止我的模态导航到具有?.....并因此不重新呈现我的整个应用程序的路线？

我试图在 a 中显示一条简单的消息react-modal，具体取决于父级的状态。为了简单起见，我在 中有一个按钮，Modal单击它会更改父级的状态。然后它应该在 上显示一条消息Modal，但是在我关闭并重新打开模式之前不会发生这种情况。

这是代码的简化版本。

仅在This is the message重新打开模式后才会显示，但我希望它在打开时显示。

如果用户不采取任何行动，我需要在 13 分钟不活动后显示超时警告模式，并在 15 分钟后结束会话。我需要使用 reactjs 来实现这一点。我在https://www.npmjs.com/package/react-timeout#react-classic-verbose检查了反应超时，但这没有帮助。如果有人知道这样做的方法，请与我分享。

我是 React 和一般编码的新手。我试图在同一个组件中呈现多个模态，但它们都同时呈现，因此看起来所有链接都在呈现最后一个模态中的文本。
这里是设置状态的地方：

这是模态结构：

空括号中是否应该有一个值 -> openModal() & closeModal() ？

我正在使用基于文档中的示例代码的模态：https ://react-bootstrap.github.io/components.html#modals-live 。我想要的是仅在 1）它的数据准备好和 2）打开模式时才呈现子组件。此外，子组件需要知道它必须使用的区域有多大（因为它正在内部进行一些 d3.js svg 绘图）。

顺便说一句，我也在使用fixed-data-table，所以数据（a concept）处于状态，模型在行点击时打开：

根据 Modal 文档示例，Modal 位于渲染中，并以关闭状态存在于 DOM 中，直到有东西打开它。但是，在 Modal 打开之前，Modal.Body 似乎并不存在。我的好主意是孩子ConceptDetail可以从 ref 获取 ClientWidth 到其包含的 div。

这会起作用，除非 ref 直到子组件被渲染后才准备好。为了弄清楚发生了什么，我这样做了：

当我单击一行时，我会看到 alert will update, no modalBody ref，然后是 alert did update, width: 868，然后显示子组件。但是孩子没有得到宽度（或更新的参考），因为它实际上是在componentDidUpdate. 我首先看到警报的原因（我假设）是因为 Modal 是动画的并且不会在渲染时立即出现。当我关闭模态框时，我确实看到它终于收到了正确的宽度，但我不再需要它了。

所以，最具体地说，我的问题是：如何通知模态的子组件模态体的宽度？如果有人能解释做我通常想做的事情的正确方法，我将更加感激：触发带有子组件的模态显示，该子组件希望接收数据和容器尺寸作为道具。

我在带有 react-rails 前端的 rails 4 应用程序中使用 react-modal 时遇到问题。我已经按照这个 SO 问题How to call react-modal from rails-assets.org in react-rails 组件和这个 GitHub 问题https://github.com/reactjs/react-rails/issues/510中的步骤进行了操作，但是它们似乎都不起作用。

这是我的 Gemfile 中的 rails-assets gem

这是我的 application.js 文件

该//= require ./vendor/react-modal-v1.6.4调用是对 react-modal 的编译文件的调用。我是按照上面 github 问题链接中提供的说明进行的。

最后，这是我的组件定义

我在控制台上收到以下错误：

未捕获的错误：react-modal：您必须设置一个元素Modal.setAppElement(el)以使其可访问

我错过了什么？提前谢谢各位。

我对 React 比较陌生，但我正在尝试设置一个可以从任何地方打开的模式。这是我尝试打开模式的方式：

这就是我试图打开模式的方式。我几乎肯定有更好的方法。我正在使用redux，我想。我已经继承了这个项目，所以我可能不太顺利。

任何帮助将不胜感激。我想我需要在我的主布局中包含模式，但是我该如何触发它呢？

我开始在我的 react-modal 组件上收到此警告：

警告：失败的 propType：contentLabel未在 中指定所需的道具Modal。

它不会阻止模式正常工作，我只是在开发工具控制台中看到警告。我可以通过指定一些随机字符串来传递这个道具，但我不明白它的实际用途以及为什么需要它。