问题标签 [react-modal]

对于我要导入的一些模块，我最终会修改它们的声明文件以使其正常工作。我不确定我是否做错了，或者这些模块的类型是否恰好有问题。

索引.tsx

react和moment进口罚款。问题在于react-big-calendar和react-modal。这基本上是我经历的过程react-modal：

我安装了@types/react-modal.

node_modules/@types/react-modal/index.d.ts（缩写）

我试过import ReactModal from "react-modal"了，这给了我Module '...' has no default export。

我试过import { ReactModal } from "react-modal" 了，这给了我Module '...' has no exported member 'ReactModal'。

我尝试import * asReactModal from "react-modal" 了 which 编译，但Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object在运行时给了我。

最终我只是将声明文件更改为：

然后我可以使用import ReactModal from "react-modal"，它工作。

随着react-big-calendar我刚刚卸载@types/react-big-calendar，现在有我自己的打字。当然，其他人正在为这些包使用这些声明文件而没有这些麻烦。任何指导将不胜感激。

包.json

tsconfig.json

我正在使用这个反应模式插件：https ://github.com/reactjs/react-modal 我需要在页面加载时在模式中显示一组对象。当第一项显示用户单击按钮时，模态的 isOpen 属性设置为 false。每个项目都有一个道具 showModal 将值提供给模态的 isOpen。当用户不断单击时，我不断将当前对象的值设置为 false，然后为下一个对象设置为 true。这一切都很好，但问题是覆盖和对话窗口留在屏幕上，只有模式中的内容被更新。我希望模态完全关闭并打开以显示数组中下一个对象的内容。我不得不将我的代码剥离为下面的简化版本：

我正在使用反应模式

文档提到默认情况下单击覆盖时模式应该关闭。即使我将shouldCloseOnOverlayClick道具设置为true，这仍然不起作用。

我不知道任何可能阻止该事件发生的事情。

如果这与任何事情相关/指示性（而且我还没有弄清楚为什么会显示），我在 Chrome 开发人员工具中注意到我的模态的覆盖和内容节点都有一个未定义的类。我使用的所有 CSS 类都已定义并按应有的方式工作。

这是相关的 JSX 和 CSS，如果需要更多上下文，请告诉我。

JSX：

CSS类：

我正在我的 React+Redux+ReactRouter4 应用程序中使用react-modal。

我有一个 MainLayout 容器和一个 Home 容器。

模态只会在主容器被渲染时使用，所以我在主容器中有 ReactModal 的逻辑。我可以像这样轻松地从 Home Container 打开模式：

问题是 MainLayout 容器有一个导航，也需要打开模态的能力，但是很明显，this.openModal 那里不存在……如何让 MainLayout 容器在 Home 容器中打开模态？

应用程序.jsx

我正在使用反应模态，并且单击覆盖时模态不会关闭。我为 isOpen 和 onRequestClose 提供了道具，但模式保持打开状态。

我知道这在过去一直是个问题。还有什么我可以尝试的吗？先感谢您。

我正在使用反应模式在我的一个组件上设置一个弹出窗口。我有一个组件，它呈现一个用反应模式包装的 div。我的父组件在加载时呈现模态组件，并将 isOpen 设置为 false。单击父集上的链接将 isOpen 设置为 true 并导致模式弹出窗口打开。

我在打开的弹出窗口中更改我的数据，然后保存更改并在单击关闭按钮时关闭模型。

我正在使用带有处理数据更改和状态更改的操作和减速器的 redux 设置。

从概念上讲，我将如何更新父级以显示从弹出窗口中所做的更改？不应该使用操作更改我的数据导致存储重新生成并因此更新我的组件中的数据，还是我必须在保存后显式“刷新”我的存储？我的问题是，现在当弹出窗口关闭时，它不会触发 DataView 组件上的任何类型的“刷新”。

以下组件：

数据视图组件

DataViewPopup 组件

所以我正在尝试将 react-modal 集成到我的项目中。

该this.setState()方法没有被调用我看不到控制台日志，当我将回调传递给 setState() 方法时也没有。

有人可以帮我吗？

谢谢你的时间！

更新——启动组件代码。

);

另外我不得不提到我也在使用redux.

我遇到的问题与用户单击按钮时调用函数有关，该按钮将打开一个模式。该函数的目的是对用户信息发出 GET 请求以填充模式。我正在使用 react-modal 包，它接受 onAfterOpen 道具。我知道我可以使用这个道具来调用我的函数，但是要发出 GET 请求，我还需要将 id 传递给请求。

我的模态设置如下：

像这样声明我的函数的问题是我的页面呈现了一个按钮列表，该列表与模式相关联。所以在渲染时， this.props.getInfo(id) 将被调用。

例如，我的容器组件将呈现一个 Button 组件列表（比如 9 个），如果每个 Button 组件都包含一个 Modal 组件，那么该函数将被调用 9 次。

我正在使用 react 的基本组件模态组件 - https://github.com/reactjs/react-modal

我想要实现的是我想从另一个导入了模态的父级打开模态。

我已经读过这可以使用 refs 并更改模态的状态来完成。我在这里到底做错了什么？

谢谢！

有人有实施经验react-native-modal吗？在我使用它时，当我在模态之外点击时，模态不会关闭。

这是我尝试过的

• 添加 onBackdropPress(() => {this.props.hideModal()})
• 在组件内部和外部添加 TouchableWithoutFeedback
• 和许多其他方法...

这是我要显示模态的屏幕。

这是模态组件：CameraImageSelectModal.js

谢谢！！