Commit 3af90390 by QuentinHsu

perf(Setting): add tabActiveKey state to Setting component

parent a8433823
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'; ...@@ -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 = () => { ...@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment