使用react-router在路由之间保留组件 [英] Keep components between routes using react-router

问题描述

我有一个多步骤表单，我正在使用react-router在不同步骤之间导航。
在部分步骤中，我向用户展示了iframe。
当用户在步骤之间导航时，它总是卸载并重新安装iframe，这会导致两个问题：

I have a multi-steps form and I'm using react-router to navigate between the different steps. In some of the steps I show an iframe to the user. When the user navigates between steps it always unmount and re-mount the iframe, this causes two problems:

1. 重新加载来自其来源的iframe，这使得它跳跃。


2. 由于它是一个iframe，我无法控制其内部状态，并且它失去了步骤之间的状态。因此，如果用户对iframe有一些输入，则在移动到下一步时输入将丢失。

有没有办法将iframe实例保留在某个全局存储中，并在必要时将其挂载到DOM？

Is there any way to keep the iframe instance in some global store and only mount it to the DOM when necessary ?

还有其他想法如何解决这个问题？

Any other ideas how to solve this problem ?

谢谢。

推荐答案

有没有办法保留iframe实例在一些全球商店和
只在必要时将它挂载到DOM？

Is there any way to keep the iframe instance in some global store and only mount it to the DOM when necessary ?

是的，你可以，但如果你甚至从DOM中删除一个iframe并在以后重新附加它仍然会重新加载，所以这样问题实际上与React的组件树几乎没什么关系。你真正需要的只是隐藏你的iframe并在以后再次显示它。

Yes, you could, but if you even remove an iframe from the DOM and re-append it later it still gets reloaded, so in that way the problem actually has very little to do with React's component tree. What you really need is to just hide your iframe and show it again later.

您当然可以在React中隐藏和显示iframe，如下所示：

You could of course hide and show the iframe in React like this:

{ <iframe src="..." style={{display: this.state.showing ? "block" : "none"}} /> }

在这种情况下，你需要在某个不下载。您可以使用树中更下方的组件向上通信以显示/隐藏iframe。

In this case you need to render the iframe at some place that does not get unmounted. You can use components further down in your tree to communicate back upwards to show/hide the iframe.

但如果你真的希望能够隐藏/显示组件树中不同位置的iframe，可以安装和卸载，但是它会变得相当棘手，而不是典型的React用例。

But if you really want to be able to hide/show the iframe from different places in your component tree that get mounted and unmounted, you can, but it gets quite a bit trickier and not a typical use-case of React.

您需要自己创建DOM iframe并将其附加到React的组件树之外的DOM中（这通常是React中的反模式）。然后，您可以使用代理组件在挂载和卸载时显示/隐藏此DOM元素。

You'll need to create the DOM iframe yourself and append it somewhere into the DOM that is outside React's component tree (this is generally an anti-pattern in React). Then you can use a proxy component to show/hide this DOM element when mounted and unmounted.

这是一个将iframe附加到文档的示例.body 并在安装组件时显示它，并在卸载组件时隐藏它：

Here's an example that appends an iframe to the document.body and shows it when a component is mounted, and hides it when the component is unmounted:

class WebView extends React.Component {
  static views = {};
  componentDidMount() {
    if (!WebView.views[this.props.url]) {
      WebView.views[this.props.url] = this.createWebView(this.props.url);
    }
    WebView.views[this.props.url].style.display = "block";
  }
  componentWillUnmount() {
    WebView.views[this.props.url].style.display = "none";
  }
  createWebView(url) {
    let view = document.createElement("iframe");
    view.src = this.props.url;
    document.body.appendChild(view);
    return view;
  }
  render() {
    return null;
  }
}

这里正在处理CodePen ：注意当你隐藏（卸载）然后显示（挂载） WebView iframe状态（例如搜索输入）保持不变。

Here it is working on CodePen: notice that when you hide (unmount) then show (mount) the WebView the iframe state (for example search input) stays the same.

您还需要定位和调整iframe的大小以显示在您的内容中布局正确。我没有表现出来，因为一般来说解决起来有点困难。

You will also need to position and size the iframe to appear within your layout correctly. I haven't shown this because it's a bit difficult to solve generally.

请注意，这个解决方案类似于portalpattern 。这里的区别是不要卸载iframe以保持其状态并防止重新加载。

Note that this solution is similar to the "portal" pattern. The difference here is to not ever unmount the iframe in order to preserve its state and prevent reloading.

这篇关于使用react-router在路由之间保留组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！