如何延迟加载反应应用程序直到触发操作？答案

【问题标题】：How to delay a react app from loading until a action is triggered?如何延迟加载反应应用程序直到触发操作？
【发布时间】：2023-03-18 09:48:01
【问题描述】：

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

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

• 我想延迟 React 应用的上传，直到我网页上的所有内容都加载完毕。

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

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

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

提前谢谢大家

【问题讨论】：

标签： javascript

【解决方案1】：

我会允许 React 应用程序在页面加载时加载，但让它显示一个“正在加载...”微调器。向 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 何时发送了它的 postmessage。例如，也许某个地方有一个隐藏元素，它既知道 postmessage 又被上面的 React 组件监听。

这里有一篇文章提供了更多关于让 React 等待渲染的选项。 React - Display loading screen while DOM is rendering?

【讨论】：