Javascript 如何延迟react应用程序加载，直到触发操作？

我正在从事一个web应用程序项目。该项目由普通php网页和嵌入式react应用程序组成。我开发了所有的网页，并外包了react应用程序部分

我已将react应用程序放在iframe中

•我想推迟react应用程序的上传，直到我的网页上的所有内容都加载完毕

这是因为我正在通过

iframe.contentWindow.postMessage（）

向应用程序发送信息。我正在使用eventlistener来获取信息

我遇到的问题是在触发事件之前加载了react。所以我的react act一直在读取一个未定义的源。因此，我想将其从加载延迟到网页加载或事件触发之后

•我无法阻止iframe加载，因为

iframe.contentWindow.postMessage（）

会在加载时将信息发布到iframe。 有谁能告诉我如何延迟react应用程序的加载，直到发送post消息

---

提前感谢各位

我会允许React应用程序在页面加载时加载，但会让它显示一个“加载…”微调器。向名为“isLoaded”的React组件添加一个属性，该属性最初设置为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何时发送了其postmessage。例如，可能在某个地方有一个隐藏的元素，它既知道postmessage，又被上面的React组件监听

这里有一篇文章提供了更多关于让React等待渲染的选项。

---

我允许React应用程序在页面加载时加载，但让它显示一个“加载…”微调器。向名为“isLoaded”的React组件添加一个属性，该属性最初设置为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何时发送了其postmessage。例如，可能在某个地方有一个隐藏的元素，它既知道postmessage，又被上面的React组件监听

这里有一篇文章提供了更多关于让React等待渲染的选项。