在改变选项卡后，我如何在React组件中维护iframe的状态?

Question

下面是我正在使用的一个基本示例:

https://codesandbox.io/s/peaceful-faraday-xl3kz0?file=/src/Tabs.js

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内的另一个页面(例如"Current events")，然后点击标签1，然后再次点击标签3,iframe将再次加载维基百科主页。是否有一种方法可以让我保持这个iframe的状态，以便即使在我改变制表符之后，当我回到制表符3时，它与之前完全相同?

Answer 1

这看起来不像有一个标准的方法，从这个答案判断，你可能需要一个自定义的事件监听器，存储最后点击的url在某些状态或cookie(如果你想在刷新之间持续)，然后在你的iFrame你可以做

src={lastUrl || 'https://en.wikipedia.org/wiki/Main_Page'}

另一个hack的方法可以是打乱z-index，这样tab 3实际上从来没有从屏幕上删除，但只是坐在背景隐藏的CSS(还没有测试过)。但是这种方法可能会有一些性能问题。