更改选项卡后，如何在React组件中维护iframe的状态？

Question

这是我正在使用的准则示例：

import { Tab } from "@headlessui/react";

export default function Tabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Content 1</Tab.Panel>
        <Tab.Panel>Content 2</Tab.Panel>
        <Tab.Panel>{renderIframe()}</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  );

  function renderIframe() {
    return (
      <iframe
        src="https://en.wikipedia.org/wiki/Main_Page"
        height="800px"
        width="800px"
        title="Example"
        loading="eager"
      ></iframe>
    );
  }
}

如果您单击“选项卡3”，则应看到一个指向Wikipedia的iframe。但是，如果您导航到IFRAME（例如“当前事件”）中的另一个页面，然后单击选项卡1，然后再次单击“选项卡3”，IFRAME将再次加载Wikipedia主页页面。我有没有办法维护此iframe的状态，以便即使在更改选项卡之后，它也与我返回Tab 3时完全相同？

Answer 1

从您可能需要一个自定义事件侦听器，该侦听器将最后一个单击的URL存储在某些状态或cookie中（如果您想在刷新之间持续存在），那么在iFrame中，您可以做

src = {lasturl || 'https://en.wikipedia.org/wiki/main_page'}

一种替代的hacky方法可以 与z-index在一起，以便该选项卡3实际上从未从中删除。屏幕，但仅坐在CSS隐藏的背景中（尚未对此进行测试）。但是，这种方法可能会引起某种性能问题。