Открывайте новые вкладки с реакцией портала

Question

Я пытаюсь открыть новую вкладку с порталом, проблема в том, что на вкладке не отображается содержимое, которое я хочу получить, я следую этому сообщению , и вкладка открывается идеально, но не отображается содержание и выглядеть так:

Это мой реагирующий код портала:

    import ReactDOM, {PureComponent} from 'react';

export default class Portal extends PureComponent{
  constructor(props) {
    super(props);
    this.containerEl = null;
    this.externalWindow = null;
  }

  componentDidMount() {
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
    this.containerEl = this.externalWindow.document.createElement('div');
    this.externalWindow.document.body.appendChild(this.containerEl);
  }

  componentWillUnmount() {

    this.externalWindow.close();
  }

  render() {
    if (!this.containerEl) {
      return null;
    } 
    return ReactDOM.createPortal(this.props.children,this.containerEl);  
  }
}

И это мой код, где я открываю новую вкладку:

{this.state.showWindowPortal && (
            <Portal closeWindowPortal={this.closeWindowPortal} >
            <p>Hello</p>
       <button onClick={() => this.closeWindowPortal()} >Close me! 
  </button>
</Portal>)}

Надеюсь, вы, ребята, можете мне помочь, спасибо!

Answer 1

componentDidMount выполняется после render.

this.containerEl устанавливается на this.externalWindow.document.createElement('div'); в componentDidMount.

Вы проверяете this.containerEl в render, и в это время this.containerEl равно null.

Для получения дополнительной информации о порядке перехватов жизненного цикла React, пожалуйста, проверьте http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Answer 2

Вы не создаете containerEl достаточно скоро.(Его не нужно создавать в документе другого окна, поэтому я полагаю, именно поэтому вы его откладывали.) Чтобы исправить это, измените this.containerEl = null; на this.containerEl = document.createElement('div'); в конструкторе и удалите this.containerEl = this.externalWindow.document.createElement('div'); из * 1005.*.