问题标签 [react-modal]

我想测试一个用 react-modal 构建的组件。该库使用门户将实际模态安装在父级之外。酶中的查找方法仅查看从包装器元素开始的树，不包括开放模式。

据我所知，直到最近，门户网站还没有得到官方支持，但从 React 16 和 Enzyme 3 开始，它们应该是 ( enzyme-252 )

看起来开放门户可以从 DOM 中通过安装有酶的组件访问，但要找到它并不容易。我已经看到使用 refs 的策略（我宁愿不添加它只是为了测试）和 document.querySelector （比处理 ReactWrapper 更糟糕）。

最有希望的策略声称可以使用foundEl.node.portal（react-modal-563 ）从它的父级访问门户，但我还没有让它工作（似乎节点属性可能已被弃用，因为当我使用它时，我得到一个错误： Attempted to access ReactWrapper::node, which was previously a private property on Enzyme ReactWrapper instances, but is no longer and should not be relied upon. Consider using the getElement() method instead.

有没有人找到更好的策略或让这个策略起作用？我在 Enzyme 3.1.1、React Enzyme Adapter 1.0.4 和 React 16.2 上供参考。

我有一个呈现 MonthView 组件的 MonthContainer 组件。容器将数据传递给视图，视图进行格式化并显示一个带有对应于月份和类别的链接按钮的表格。

我想要做的是，当在 MonthView 中单击链接时，页面上会显示一个弹出窗口，其中包含另一组数据，该数据基于所单击链接的年份、类别和月份。我正在使用 react-modal 来实现这一点。

在我的初始设置中，MonthViewContainer 正在渲染 MonthView 和 PopupContainer，而后者又渲染了 PopupView。向 PopupContainer 传递了一个完整的交易数据列表（未过滤），然后将其传递给 PopupView。当我单击 MonthView 中的链接时，它会将 displayModal 标志设置为 true，并且包装在 react-modal 中的 PopupView 组件将显示基于年、月、类别过滤的事务。这工作得很好，除了我在保存和关闭模式后更新父组件的挑战。但是，我不喜欢将所有状态加载到 PopupView 中然后进行过滤的想法。理想情况下，我想在 PopView 加载时获取数据。我很难做到这一点。

我的设置有几个问题。下面是我遇到问题的每个部分的注释代码。

MonthViewContainer

弹出容器

我在模态中有一个信息轮播。在 Ios 上，它可以完美加载并且可以打开和关闭。在 Android 上，如果初始状态设置为 true，它会完美打开，但是当它关​​闭并重新打开时，模式会慢慢淡入，并且轮播不存在。

我尝试过使用本机 Modal 和插件。使用本机我的关闭按钮和硬件后退按钮不会关闭 android 上的模式。我在 Galaxy Note 8 上进行测试。

任何帮助将不胜感激，因为我已竭尽全力尝试使其正常运行。

这是模态代码部分。

谢谢

我正在使用 react-modal 和 react-bootstrap-table2 在模式中显示行的值。

现在，无论单击的行如何，模态都会显示最后一行的值。如何确保每个模式显示自己的行数据？

表中使用了 renderButtons：

并在我的组件中渲染

看看下面的代码。

selectedOption 还包含随机选择的字符串。

当我使用{props.selectedOption && <p>{props.selectedOption}</p>}它时，会出现错误“对象作为 React 子级无效（找到：带有键 {option} 的对象）。如果您打算渲染子级集合，请改用数组。”。不使用这个我的代码工作正常。请帮我解决这个问题

在react-table的一个实例中，我在每一行添加一个按钮来启动一个react-modal。这在表格的第一页上按预期工作，但在后续页面上，不正确的id道具被传递到我的自ReactModal定义listId. 传递的id似乎是表格第一页上相同位置的行。因此，第 2+ 页第一个位置的模态组件接收id第一页第一个位置的行的 prop。

我认为有问题的行在Home下面 where Cell: (row: any) => <ListDetailsModal listId={row.value} />,。的值{row.value}似乎不能在不是第一个表的页面上正常工作。

如何确保正确id传递到ListDetailsModal's的listId所有页面上？HomeReactTable

链接：现场演示 | 来源

react-table 组件类：

react-modal 组件类：

I have the following code (trimmed the form and some other boilerplate):

Adding {responseMessages} in the Modal displays nothing, but if I change it to {console.log(responseMessages)} it shows in the console that responseMessages is not empty (it has different length, but not empty) What could be the reason for that?

EDIT: openModal function:

ResponseJson:

我使用了这个 npm 包 => react-router-modal( doc )

在该示例中（单击），只需单击一次即可从模态返回，但在我的情况下，我必须单击鼠标两次才能返回，我不知道为什么......

所以也许这里有人可以帮我回答这个问题。

该问题的快速演示-> https://youtu.be/szRC_K10pyA

完整的项目代码 -> github

以下两个最重要的组件：

零件BeerListItem

零件BeerProfile

现在每当我的模态关闭时，它会一直向左滚动并且不会返回到调用它的原始 div。我尝试了每个 api 回调和每个反应生命周期方法，但没有任何效果。但是，如果我在终端中使用 scrollIntoView ，它工作得很好。

复制步骤： 1. 转到http://www.arabisraeliconflictmadesimple.com/timeline 2. 按选项，联合国 3. 向右滚动到 1967 4. 按“联合国安全决议 242” 5. 注意我们回到了 1947

这是我调用模态的组件```

我正在使用 react-modal，但我找不到任何方法来成功设置 Modal 的位置。我在网上使用每个示例的内联样式，但它们没有效果。我正在做我在 react-modal 网站上的 codepen 示例中看到的工作，但它在我的应用程序中不起作用。有些东西显然不同，但我看不出它是什么。

这就是我渲染模态的方式：

我已经为 style 属性尝试了许多不同的值，但是我设置的任何值都没有效果。我也尝试过不使用该bsSize属性，但这也不起作用。我只需要内容的顶部边框稍微低一些，因为它是在同一位置的另一个模态框之上打开的，并且我希望它在视觉上很明显，在页面上打开了两个模态框。我正在使用反应模式 3.3.1。