使用门户网站反应打开新标签页

Question

我正在尝试使用门户网站打开一个新选项卡，问题是该选项卡未显示我想要获得上一页的内容，我遵循了此post并且该选项卡已完美打开，但未显示内容看起来像这样：

这是我的反应门户代码：

    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

您还没有足够快地创建containerEl。 （不需要在另一个窗口的文档中创建它，我认为这是您延迟它的原因。）要解决此问题，请在构造函数中将this.containerEl = null;更改为this.containerEl = document.createElement('div');，然后删除{{ 1}}来自this.containerEl = this.externalWindow.document.createElement('div');。

Answer 2

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/