如何延迟加载反应应用程序直到触发操作?
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?
【讨论】:
以上是关于如何延迟加载反应应用程序直到触发操作?的主要内容,如果未能解决你的问题,请参考以下文章
如何延迟读取触发 HTTP 请求的正文,直到稍后在 Azure 函数中?
MyBatis应用开发(18)延迟加载之延迟加载触发方法(lazyLoadTriggerMethods)