1

我试图用门户打开一个新标签，问题是该标签不显示我想要获得上一个的内容，我关注这篇文章并且标签完美打开，但不显示内容，看起来像这样： 在此处输入图像描述

这是我的反应门户代码：

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

希望大家能帮帮我，谢谢！

4

2 回答 2

1

你的创作containerEl速度不够快。（它不需要在另一个窗口的文档中创建，我认为这就是你延迟它的原因。）要修复它，在构造函数中更改this.containerEl = null;为，然后从.this.containerEl = document.createElement('div');this.containerEl = this.externalWindow.document.createElement('div');componentDidMount

于 2019-05-08T01:44:05.803 回答
1

componentDidMount之后被执行render。

this.containerEl 正在设置为this.externalWindow.document.createElement('div');in componentDidMount。

您正在办理登机手续this.containerEl，render当时this.containerEl正在办理登机手续null。

有关 React 生命周期钩子顺序的更多信息，请查看http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

于 2019-05-08T01:52:45.133 回答