react项目解决子页面关闭时刷新父页面的解决方案

因为项目中需要进行流程审核，所以子页面是跳到一个新的界面(window.open)，在子页面审核完成后跳回主页面进行刷新。所以使用window.onbeforeunload来进行处理(在即将离开当前页面（刷新或关闭）时触发)。

子页面：

window.onbeforeunload = function() {

var num = + window.opener.document.getElementById('refreshDiv').innerHTML;

window.opener.document.getElementById('refreshDiv').innerHTML = 1 + num;

}

父页面：

<span id="refreshDiv" style={{ display: 'none' }}>1</span>  

利用对id为"refreshDiv"的Dom节点的控制来执行刷新逻辑。

逻辑：

当子页面关闭时，会修改id为refreshDiv的Dom节点的值。然后通过捕获id为refreshDiv的值的变化（react项目需要引入Jquery），来执行刷新逻辑的操作。而修改Dom节点会导致界面重新渲染重绘，进行重新render，所以需要把捕获id为refreshDiv的值的变化写在componentDidUpdate这个生命周期里。

在父页面添加代码：

import $ from 'jquery';

componentDidUpdate(nextProps, nextState) {
    const { dispatch } = this.props;
    const params = { page: 1, rows: 9 }; 
    console.log(nextProps, nextState, 'nextProps, nextState')
    $("#refreshDiv").bind('DOMNodeInserted', function (e) {
      console.log("调取刷新接口")
      dispatch({ type: 'workPlace/fetchTask', payload: params });
    });

    return true
  }