react关闭当前页面

在React中关闭当前页面可以使用window对象的方法来实现。具体方法是在组件中使用window.close()方法，这将会关闭当前页面。需要注意的是，这个方法只能在d出窗口或者浏览器标签页中使用，如果在主窗口中调用该方法，浏览器将会提示用户是否关闭窗口。另外，为了避免出现d出窗口被浏览器拦截的情况，需要在调用该方法之前先使用window.open()方法打开一个新的窗口，然后再调用window.close()方法来关闭该窗口。总之，在React中关闭当前页面需要注意一些细节问题，需要根据具体情况来选择合适的方法。

React+Electron桌面应用开发文章索引

这篇文章继续之前的文章，介绍如何创建d窗。

MaterialUI官方给出了Dialog各种实现案例 ，但都很繁琐。因为d窗经常被使用，所以我们需要极其简单的实现。

模态d窗必须打断用户当前流程，用户必须做出选择或 *** 作。同时显示的模态d窗最多1个，不能重叠。

所以，d窗不像是一个界面元素，而更像一个全局功能，任何按钮可以直接呼叫它，让它显示出来。

d窗分为几类：

我们把用户 *** 作分为两类：

我们再分析打开和关闭的实现细节：

尽管内部的交互可能更加复杂，但实现很简单，因为我们可以在窗口打开时候增加一个children参数，把整个内容区填进去就可以。

我们创建Utitlies/MyDialog.js。

这里输出了一个标准元素，当它被App的render使用的时候，会创造两个全局的方法用来显示和隐藏窗口。

一个默认的状态defaultState用来初始化和清空窗口的全部设置，包含了我们上面提到的各种参数。实际上大部分默认值都写在了render()函数里面。

比起官方案例，MyDialog并不简单，但这是一劳永逸的做法，我们看一下具体使用。

首先，我们要在顶级的App.js中加载 import MyDialog from '../Utilities/MyDialog' 。

然后在render()的最后使用它，这样$showMyDialog和$hideMyDialog就被添加到global全局了：

好了，现在就绪了，我们可以在任意页面中使用，比如在HomePage.js的render()中直接使用它（因为App.js最先已经把$showMyDialog和$hideMyDialog全局化了，所以不需要再加载MyDialog模块了）：

这里我们在页面上创建了open dialog按钮。

点击按钮将打开一个d窗。

而d窗内我们没有使用简单的文字内容content字段，而是使用了children向d窗内添加了一个按钮close dialog，点击它会通过自身的onClick事件关闭d窗，同时输出HomePage的state.title，而不是MyDialog的state。

如果点击下面的确认或取消按钮，则会调用onClose方法输出true或flase，我们可以利用这个知道用户点击了哪个按钮。

END

d窗前确认

一、需要离开提示页面上添加

a.引入Prompt

b.在页面中添加组件，可在render内任一地方添加

<Prompt message='商家信息还未保存，是否离开？' when={true} />

二、在路由页面进行配置

a.Router上添加 getUserConfirmation={getConfirmation}

b.在路由页面添加方法

三、触发d窗

通过设置window.pageChangeConfirm，触发是否d窗。

例：在componentDidMount设置默认离开是否d窗。 也可在点击页面时触发修改d窗参数

​

---