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

原创已于 2022-03-14 10:44:02 修改 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-03-14 10:41:35 首次发布

react 同时被 2 个专栏收录

29 篇文章

订阅专栏

antd

11 篇文章

订阅专栏

这是一个使用React和Ant Design库创建页面详情页顶部Tab切换功能的示例代码。组件通过维护状态来跟踪当前选中的Tab，并在Tab变更时更新内容显示。TabList包括‘总览’和‘详情’两个选项，对应不同的内容区域。内容区域根据tabActiveKey渲染对应的Card组件，展示不同内容。

部署运行你感兴趣的模型镜像

实现页面详情页顶部的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);

您可能感兴趣的与本文相关的镜像