React-portal - закрытие нового окна с помощью кнопки закрытия браузера

Question

Я реализовал нечто подобное в своем приложении:

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

Но когда я нажимаю кнопку закрытия браузера в новом окне, "componentWillUnmount" не вызывается, поэтомусостояние не меняется, даже когда я закрываю портал с помощью кнопки закрытия браузера.Есть ли решение этой проблемы?Как я могу поймать "кнопку закрытия браузера" для реагирующих порталов?

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

Answer 1

В приложении отправьте метод closeWindowPortal в качестве опоры в Window

<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);
  }
}

Answer 2

Я думаю, что вы должны делать что-то подобное, используя 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();
  }