React/Next.js垂直菜单点击切换仅展示单个内容的实现咨询

核心改动是将分散的多个状态合并为单一激活状态，统一控制展开逻辑，修改后的完整代码如下：

import {useState} from "react";

export default function Test() {
    // 存储当前展开的内容ID，null表示所有内容都收起
    const [activeId, setActiveId] = useState<number | null>(null);

    // 统一的点击处理逻辑
    const handleClick = (id: number) => {
        // 如果点击的是当前已展开的项，直接收起
        if (activeId === id) {
            setActiveId(null);
            return
        }
        // 否则替换为当前点击的项，自动收起上一个
        setActiveId(id)
    }

    return (
        <div>
            <div onClick={() => handleClick(1)}>
                点击展示内容1
                <div>
                    {activeId === 1 && <Content_1 />}
                </div>
            </div>
            <div onClick={() => handleClick(2)}>
                点击展示内容2
                <div>
                    {activeId === 2 && <Content_2 />}
                </div>
            </div>
            <div onClick={() => handleClick(3)}>
                点击展示内容3
                <div>
                    {activeId === 3 && <Content_3 />}
                </div>
            </div>
        </div>
    )
}

const Content_1 = () => {
    return (
        <p>内容1</p>
    )
}
const Content_2 = () => {
    return (
        <p>内容2</p>
    )
}
const Content_3 = () => {
    return (
        <p>内容3</p>
    )
}

如果后续需要新增菜单项，只要新增对应ID和内容组件，无需额外新增状态，可维护性更高。

内容的提问来源于stack exchange，提问作者Rodrigo Yañez