antd design 实现页面详情页顶部的tab切换

实现页面详情页顶部的tab切换

代码展示

import {
    Card,
    Form,
} from "antd";
import React, { Component } from "react";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
class NameSpaceDetail extends Component {
    state = {
        tabActiveKey: "overview",
    };
    render() {
        const {
            tabActiveKey,
        } = this.state;
        
        const tabList = () => {
            return [
                {
                    key: "overview",
                    tab: "总览"
                },
                {
                    key: "detail",
                    tab: "详情"
                }
            ];
        };
        const onTabChange = (tabActiveKey) => {
            switch (tabActiveKey) {
                case "overview":
                    break;
                case "detail":
                    break;
                default:
                    break;
            }
            this.setState({
                tabActiveKey: tabActiveKey
            });
        };
        const contentList = {
            overview: (
                <>
                    <div>
                        1111
                    </div>
                </>
            ),
            detail: (
                <>
                    <Card bordered={false}>
                    <div>
                        2222
                    </div>
                    </Card>
                </>
            )
        };
        return (
            <>
                <PageHeaderWrapper
                    tabActiveKey={tabActiveKey}
                    onTabChange={onTabChange}
                    tabList={tabList()}
                >
                    {contentList[tabActiveKey]}
                </PageHeaderWrapper>
            </>
        );
    }
}
export default Form.create()(NameSpaceDetail);