Question

我有一个需要一段时间才能加载的组件。实际上，它是一个加载<xsl:template match="w:r[w:rPr/w:sz/@w:val='44']/w:t">另一个网站的组件，需要一段时间才能加载。

我希望安装该组件，因此运行加载iframe的componentDidMount代码块，以便当用户点击“创建”时。选项卡，用户立即在页面的<iframe>部分中看到iframe。

是否有办法指示react-router 预加载组件，同时在路由更改时保留相同的条件呈现逻辑并保留呈现组件页面上的位置？

这是我在应用程序根目录上的<main>语句，为您提供一些背景信息：

render()

这是我希望React Router预加载的组件：

render() { return ( <div className="App"> <Nav /> <Snackbar open={this.props.snackbar.get().open} message={this.props.snackbar.get().message} autoHideDuration={4000} onRequestClose={() => this.handleSnackbarRequestClose()} /> <TreeViewer /> <PayloadListener/> <main> <ThankYouModal open={this.props.showConfirmationModal.get()} handleClose={ () => this.props.showConfirmationModal.set(false) }/> <Switch> <Route path="/imageservices" component={ImageServicesController} /> <Route path="/create" component={Iframe} /> <Route exact path="/account" component={Account} /> <Route exact path="/analytics" component={AnalyticsController} /> <Route path="/support" component={SupportView} /> <Route path='/login' render={ (props) => <Login { ...props } /> } /> <Route path='/logout' render={ (props) => <Logout { ...props } /> } /> </Switch> </main> </div> ); }

我怎样才能做到这一点？

Answer 1

好吧，如果您查看React component lifecycle，您会发现渲染始终在 componentDidMount 之前运行。这样有效的话，您将无法在不渲染的情况下挂载组件。

这些是挂载时调用的生命周期方法：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

您可以尝试一些操作：

在需要时渲染iframe，并在加载时淡入。

您可以轻松地为iframe的 load 事件添加一个eventListener，并对其进行适当的更改以使其在状态更改时淡入。

...
componentDidMount() {
  this.iframe.addEventListener("load", this.handleLoad);
}

componentWillUnmout() {
  this.iframe.removeEventListener("load", this.handleLoad);
}
...
<iframe ref={ref => this.iframe = ref } />
...

当我不总是需要iframe时，我就这样做了。这是零星的事情，总是一页的事情。

您可以使用 preload 属性

如果您知道用户会偶然发现iframe内容，那么这是理想的选择。您可以开始预加载用户最有可能遇到的内容，从而有效地阻止用户等待。

您可以将其添加到文档的头部：

<link rel="preload" href="your-doc-url" as="document" />

然后正常使用iframe：

<iframe src="your-doc-url"></iframe>

如果您的iframe网址是动态的，并且依赖于经过身份验证的用户提供的某些信息，并且您无法立即将其放在html文件中，请记住，只要您始终可以使用react-helmet将其呈现到head标签有您想要的信息。

Answer 2

不是通过react-router，但是您可以在link中使用preload as document index.html，以确保文档被延迟加载。浏览器。目的是预加载文档，然后将其显示在iframe中。您也不需要更改路由器机制。

在此处详细了解-https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content。

基本上，只需将其添加到head的{{1}}中即可：

index.html

React Router v4 - 无需渲染的预安装组件

2 个答案: