切换内容组件类似tab

import React, {useState} from "react";
import {connect} from "react-redux";
import {hot} from "react-hot-loader/root";
import {Table, Button, Radio, notification, Form} from "antd";
import MyIcon from "src/commonComponents/Icon";
import OrderManage from "./OrderManage";
import TopUpManage from "./TopUpManage";
import VoucherManage from "./VoucherManage";
import commonStyles from "../../charging/index.scss";
const RadioButton = Radio.Button;
function FinancialManage() {
    //切换
    const [option, setOption] = useState("orderManage");
    //切换内容
    const content = (() => {
        switch (option) {
            case "orderManage"://订单管理
                return <OrderManage/>;
            case "topUpManage"://充值管理
                return <TopUpManage/>;
            case "voucherManage"://代金券管理
                return <VoucherManage/>;
        }
    })();
    return (
        <div className={commonStyles.wrap}>
            <div className={commonStyles.header}>
                <div className={commonStyles.item}>
                    <Radio.Group value={option} onChange={(e) => setOption(e.target.value)}>
                        <RadioButton value="orderManage">订单管理</RadioButton>
                        <RadioButton value="topUpManage">充值管理</RadioButton>
                        <RadioButton value="voucherManage">代金券管理</RadioButton>
                    </Radio.Group>
                </div>
            </div>
            <div className={commonStyles.bottom}>
                {content}
            </div>
        </div>
    )
}
function mapStateToProps(state) {
    const {    } = state;
    return {
    }
}
export default hot(connect(mapStateToProps)(FinancialManage))
切换内容组件 类似tab

切换内容组件类似tab
