Question

我正在从事Web应用程序项目。该项目包括普通的php网页和嵌入式的react应用程序。我已经开发了所有网页，并将React App部分外包了。

我已将react应用放在iframe中。

•我想延迟React应用程序的上传，直到加载网页上的所有内容为止。

这是因为我正在通过iframe.contentWindow.postMessage()向应用程序发送信息。我正在使用事件监听器来获取信息。

我遇到的问题是在触发事件之前加载了react。因此，我的反应行为一直在读取未定义的来源。因此，我想将它的加载延迟到网页加载完毕或事件触发之后。

•我无法阻止iframe加载，因为iframe.contentWindow.postMessage()在加载时将信息发布到了iframe。谁能告诉我如何延迟React应用的加载，直到发送发布消息？

先谢谢大家

Answer 1

我允许React应用程序在页面加载时加载，但是让它显示“ loading ...”微调框。向React组件添加一个名为“ isLoaded”的属性，该属性最初设置为false。当数据/网页准备好渲染时，将isLoaded设置为true，React应用将使用实际内容重新渲染。

  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
    }
  }

  componentDidMount() {
    // wait until the data is loaded, then set isLoaded to true
    window.addEventListener("someevent", function() {
      this.setState({isLoaded: true});
    }
  }

  render() {
    if (this.state.isLoaded) {
      return (
        // Actual Content
      )
    } else {
      // show loading spinner
    }
  }

您可能需要与事件侦听器一起使用，以了解iframe何时发送了其后消息。例如，也许某个地方有一个隐藏的元素，既知道后消息，又被上述React组件监听。

这是一个帖子，提供了更多让React等待渲染的选项。 React - Display loading screen while DOM is rendering?

如何延迟反应应用程序的加载直到触发动作？

1 个答案: