使用 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.您可以使用树中更下方的组件向上回通信以显示/隐藏 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 附加到 document.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.

请注意，此解决方案类似于 门户"模式.这里的区别在于永远不要卸载 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屋！