perf(Setting): add tabActiveKey state to Setting component

This commit is contained in:
QuentinHsu 2024-04-01 13:33:57 +08:00
parent 87919b032d
commit aa23c51a53
No known key found for this signature in database
GPG Key ID: 20D465A435D740D0

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import SystemSetting from '../../components/SystemSetting'; import SystemSetting from '../../components/SystemSetting';
import { isRoot } from '../../helpers'; import { isRoot } from '../../helpers';
import OtherSetting from '../../components/OtherSetting'; import OtherSetting from '../../components/OtherSetting';
@ -7,6 +7,7 @@ import OperationSetting from '../../components/OperationSetting';
import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui'; import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
const Setting = () => { const Setting = () => {
const [tabActiveKey, setTabActiveKey] = useState('1');
let panes = [ let panes = [
{ {
tab: '个人设置', tab: '个人设置',
@ -37,10 +38,14 @@ const Setting = () => {
<div> <div>
<Layout> <Layout>
<Layout.Content> <Layout.Content>
<Tabs type='line' defaultActiveKey='1'> <Tabs
type='line'
defaultActiveKey='1'
onChange={(key) => setTabActiveKey(key)}
>
{panes.map((pane) => ( {panes.map((pane) => (
<TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}> <TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}>
{pane.content} {tabActiveKey === pane.itemKey && pane.content}
</TabPane> </TabPane>
))} ))}
</Tabs> </Tabs>