Question

我已经在我的应用程序中实现了类似的东西：

https://codepen.io/gaearon/pen/mjGvRV?editors=0010

但是，当我在新窗口中单击浏览器关闭按钮时，“ componentWillUnmount”没有被调用，这就是为什么即使我使用浏览器关闭按钮关闭门户也不会改变状态的原因。有什么解决办法吗？如何捕获React Portal的“浏览器关闭按钮”？

componentWillUnmount() {
    this.state.win.close();
  }

Answer 1

我认为您应该使用componentDidMount和 componentWillUnmount添加和删除侦听器。

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleSomething.bind(this));
  }
  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleSomething.bind(this));
  }
  handleSomething(event) {
       event.preventdefault();
       this.state.win.close();
  }

Answer 2

在App中，将closeWindowPortal方法作为道具发送到窗口

<Window closeWindowPortal={() => this.closeWindowPortal()}>
    <CounterButton />
    <button onClick={() => this.closeWindowPortal()}>Close</button>
</Window>

然后用此替换Window组件

class Window extends React.Component {
  constructor(props) {
    super(props);
    this.state = { win: null, el: null };
    this.hendleClose = this.hendleClose.bind(this);
  }

  componentDidMount() {
    let win = window.open('', '', 'width=600,height=400');
    win.document.title = 'A React portal window';
    let el = document.createElement('div');
    win.document.body.appendChild(el);
    this.setState({ win, el });
    win.onbeforeunload = this.hendleClose
  }

  hendleClose(){
    this.props.closeWindowPortal()
  }

  componentWillUnmount() {
    this.state.win.close();
  }

  render() {
    const { el } = this.state;
    if (!el) {
      return null;
    }
    return ReactDOM.createPortal(this.props.children, el);
  }
}

React-Portal-使用浏览器关闭按钮关闭新窗口

2 个答案: