如何在Antd上实现懒加载tab？

Question

我正在使用antd的标签页，页面上有两个选项卡。它们同时加载，但我只希望在挂载时加载第一个选项卡，并在切换选项卡时渲染另一个选项卡。我无法实现这个功能。

有没有解决这个问题的方法？

- nandini nagaraj

Answer 1

根据文档，在你的代码中，Tabs.TabPane 组件的 forceRender 属性默认值应为 false。该属性用于：强制渲染选项卡内容，而不是在单击选项卡后进行惰性渲染。具体请参考：https://ant.design/components/tabs/。您根据什么依据判断内容是否进行惰性渲染？也许您可以分享一些代码。除此之外，您可能希望使用状态处理组件选项卡中更复杂的渲染。希望这能帮到您。

- Vincro

---

我想根据第一个选项卡中API调用获取的数据来呈现第二个选项卡的内容。如何实现？ - rs_

Answer 2

尝试在选项卡上使用destroyInactiveTabPane属性。

const App = () => {
  return (
    <Tabs
      items={items}
      destroyInactiveTabPane={true} // add this prop
    />
  );
};

- Zain Khan