iframe - 使用react-router在路由之间保留组件

Question

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

1. 它从源重新加载 iframe，从而使其跳转。
2. 由于它是一个 iframe，我无法控制其内部状态，并且它会丢失步骤之间的状态。因此，如果用户对 iframe 有一些输入，那么当进入下一步时，这些输入就会丢失。

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

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

谢谢。

Answer 1

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 并稍后再次显示。

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

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

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

<小时/>

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

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

以下示例将 iframe 附加到 document.body 并在安装组件时显示它，并在卸载组件时隐藏它:

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;
  }
}

Here it is working on CodePen :请注意，当您隐藏(卸载)然后显示(安装)WebView 时，iframe 状态(例如搜索输入)保持不变。

您还需要调整 iframe 的位置和大小，以便正确显示在布局中。我没有展示这一点，因为一般来说它有点难以解决。

请注意，此解决方案类似于 "portal" pattern 。这里的区别是永远不要卸载 iframe 以保留其状态并防止重新加载。