以下是一个使用Blueprintjs的选项卡组件,并保持内容在每个选项卡中保持挂载的示例代码:
import React, { useState } from 'react';
import { Tabs, Tab, TabPanel } from '@blueprintjs/core';
const MyComponent = () => {
const [activeTabId, setActiveTabId] = useState('tab1');
const handleTabChange = (newTabId) => {
setActiveTabId(newTabId);
};
return (
Content for Tab 1} />
Content for Tab 2} />
Content for Tab 3} />
);
};
export default MyComponent;
在上面的代码中,我们使用了useState钩子来追踪当前选中的选项卡。将activeTabId作为selectedTabId传递给Tabs组件,以便正确显示当前选项卡的内容。
每个选项卡都有一个唯一的id和标题,以及一个对应的TabPanel组件作为panel属性。当用户切换选项卡时,handleTabChange函数会更新activeTabId的值,从而触发选项卡内容的重新渲染。
这样,无论用户切换到哪个选项卡,选项卡中的内容都会保持挂载,以便能够保持其状态和数据。