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

Posted

技术标签:

【中文标题】如何延迟加载反应应用程序直到触发操作?【英文标题】:How to delay a react app from loading until a action is triggered? 【发布时间】:2019-10-02 16:14:56 【问题描述】:

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

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

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

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

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

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

提前谢谢大家

【问题讨论】:

【参考方案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?

【讨论】:

以上是关于如何延迟加载反应应用程序直到触发操作?的主要内容,如果未能解决你的问题,请参考以下文章

反应延迟加载外部amd模块

如何延迟读取触发 HTTP 请求的正文,直到稍后在 Azure 函数中?

MyBatis应用开发(18)延迟加载之延迟加载触发方法(lazyLoadTriggerMethods)

Chrome扩展,如何延迟脚本直到页面完全加载

如何使延迟加载 Apache Spark Dataframe 连接到 REST API

在AngularJS中实现一个延迟加载的Directive