使用 CSS 在 React js 中的页面部分之间切换

Question

我正在使用 React 构建一个应用程序，当单击某些按钮而不更改路由时，它会显示/隐藏页面的各个部分。 我更喜欢用更短的方式来做这件事，因为我仍然会在应用程序的后面部分做更多这样的事情。 下面是我的实现。

下面是我的实现。

import { useState } from "react";
import { Link } from "react-router-dom";

function Dashboard () {
    const [enrolled, setEnrolled] = useState('');
    const [favourite, setFavourite] = useState('none');
    const [recommended, setRecommended] = useState('none');
    const [profile, setProfile] = useState('none');
    const [changePassword, setChangePassword] = useState('none')



    const handleFavourite = () => {
        setFavourite('')
        setEnrolled('none')
        setRecommended('none')
        setProfile('none')
        setChangePassword('none')
    }

    const handleRecommended = () => {
        setRecommended('')
        setEnrolled('none')
        setFavourite('none')
        setProfile('none')
        setChangePassword('none')
    }

    const handleEnrolled = () => {
        setEnrolled('')
        setFavourite('none')
        setRecommended('none')
        setProfile('none')
        setChangePassword('none')
    }

    const handleProfile = () => {
        setProfile('')
        setFavourite('none')
        setRecommended('none')
        setEnrolled('none')
        setChangePassword('none')
    }

    const handleChangePassword = () => {
        setChangePassword('')
        setFavourite('none')
        setRecommended('none')
        setEnrolled('none')
        setProfile('none')
    }

    
    return (
        <div className="container mt-4">
            <div className="row">
                <aside className="col-md-3">
                    <div className="card">
                    <div className="list-group">
                        <h5 className="card-header">My Dashboard</h5>
                        <button id="enrolled" onClick={handleEnrolled} className="list-group-item list-group-item-action">Enrolled Courses</button>
                        <button id="favourite" onClick={handleFavourite} className="list-group-item list-group-item-action">My Favourite Courses</button>
                        <button id="recommended" onClick={handleRecommended} className="list-group-item list-group-item-action">Recommended Courses</button>
                        <button id="profile" onClick={handleProfile} className="list-group-item list-group-item-action">Profile Settings</button>
                        <button id="password" onClick={handleChangePassword} className="list-group-item list-group-item-action">Change password</button>
                        <Link style={{textDecoration: 'none'}} to="/user-login"><button className="list-group-item list-group-item-action text-danger">Logout</button></Link>
                    

Answer 1

 import {useState, useEffect} from 'react' const sectionSwitch = ()=>{ const [type, setType] = useState('type1') const handTypeChange = (type)=>{ setType(type) } return <> <div onClick="()=>handTypeChange('type1')">Type1</div> <div onClick="()=>handTypeChange('type2')">Type2</div> <div class="page-container"> {type=='type1' && <div class="type1Class">Type1Page</div>} {type=='type2' && <div class="type2Class">Type2Page</div>} </div> <> } export default sectionSwitch;