Не размонтировать ребенка, если родитель размонтирует

Question

У меня есть компонент, который я хочу визуализировать в новом окне браузера, и я использую примерно эту технику: https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

Вот краткая выдержка из этого:

class MyWindowPortal extends React.PureComponent {
  constructor(props) {
    super(props);
    // STEP 1: create a container <div>
    this.containerEl = document.createElement('div');
    this.externalWindow = null;
  }
  
  render() {
    // STEP 2: append props.children to the container <div> that isn't mounted anywhere yet
    return ReactDOM.createPortal(this.props.children, this.containerEl);
  }

  componentDidMount() {
    // STEP 3: open a new browser window and store a reference to it
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    // STEP 4: append the container <div> (that has props.children appended to it) to the body of the new window
    this.externalWindow.document.body.appendChild(this.containerEl);
  }

  componentWillUnmount() {
    // STEP 5: This will fire when this.state.showWindowPortal in the parent component becomes false
    // So we tidy up by closing the window
    this.externalWindow.close();
  }
}

TL; DR: добавление реагирующего портала в новое окно.

Полный рабочий код для приведенного выше примера: https://codepen.io/davidgilbertson/pen/xPVMqp

Это работает как шарм и даже обновляет компонент в новом окне. Так как портал является дочерним элементом компонента, открывающего новое окно, он также закрывается, когда я закрываю страницу родительского компонента (т.е. отключаю в общем).

Есть ли возможность сохранить новое окно открытым и текущий контент в нем? Его больше не нужно менять, в основном его можно было бы заморозить (никаких обновлений состояния и тому подобное). Просто сохраните то, что было предоставлено.

Любая помощь высоко ценится:)

Answer 1

Вам просто не нужно звонить closeWindowPortal() когда вы закрываете вкладку. В примере Codepen вы можете удалить это из <App />:

window.addEventListener('beforeunload', () => {
  this.closeWindowPortal();
});