javascript - 使用门户网站 react 打开新标签页

我正在尝试使用门户网站打开一个新标签页，问题是该标签页未显示我想要获取上一页的内容，我按照此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>)}

我希望你们能帮助我，谢谢！

最佳答案

您还没有足够快地创建containerEl。 （不需要在其他窗口的文档中创建它，我认为这是您延迟它的原因。）要修复此问题，请在构造函数中将this.containerEl = null;更改为this.containerEl = document.createElement('div');，然后从this.containerEl = this.externalWindow.document.createElement('div'); >。

关于javascript - 使用门户网站 react 打开新标签页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56032287/