基于React Context实现按钮切换MenuOne与MenuTwo组件

我正在编写SwitchContext和SwitchButton组件，希望点击按钮时在MenuOne和MenuTwo之间切换。尝试在Context里用IF ELSE根据value值控制显示，但没生效，求正确实现方式。

原代码实现 #

Layout.tsx #

<div>
 <SwitchContext>
  <SwitchButton />
   <div><!-- switch MenuOne <> MenuTwo --></div>
 </SwitchContext>
</div>

MenuOne组件（MenuTwo结构一致，仅内容不同） #

"use client";
export default function MenuOne() {
  return (
    <div>
      <p>MenuOne</p>
    </div>);
}

SwitchContext.tsx #

"use client";
import MenuOne from "./MenuOne";
import MenuTwo from "./MenuTwo";
import { createContext, useContext, useState } from "react";

const SwitchContext = createContext(false);

export default function SwitchContext({children,}: {children: React.ReactNode;}) {
  const [switch, setSwitch] = useState(true);
  const switchFunction = () => {
    setSwitch(!switch);
  return (
    <SwitchContext.Provider value={{ switch, switchFunction }}>
      {children}
    </SwitchContext.Provider>
  );
}
export function useSwitchContext() {
  return useContext(SwitchContext);
}

SwitchButton.tsx #

"use client";
import MenuOne from "./MenuOne";
import MenuTwo from "./MenuTwo";

export default function Switch() {
  const { switch, setSwitch } = useSwitchContext();
  return (
    <button type="button" onClick={() => setSwitch(!switch)}></button>
  );
}

问题分析 #

• SwitchContext.tsx：switchFunction函数未闭合，return语句位置错误；Context初始值类型与Provider提供的value不匹配（初始是boolean，实际提供的是对象）。
• SwitchButton.tsx：未导入useSwitchContext；组件命名（Switch）与文件名（SwitchButton.tsx）不符；错误尝试解构setSwitch，但Context里并没有暴露这个方法。
• Layout.tsx：没有根据Context状态渲染对应的菜单组件，仅留了注释占位。

修正后的完整代码 #

SwitchContext.tsx #

"use client";
import { createContext, useContext, useState, ReactNode } from "react";

interface SwitchContextType {
  isMenuOne: boolean;
  toggleMenu: () => void;
}

const SwitchContext = createContext<SwitchContextType>({
  isMenuOne: true,
  toggleMenu: () => {}
});

export default function SwitchContextProvider({ children }: { children: ReactNode }) {
  const [isMenuOne, setIsMenuOne] = useState(true);
  const toggleMenu = () => setIsMenuOne(!isMenuOne);

  return (
    <SwitchContext.Provider value={{ isMenuOne, toggleMenu }}>
      {children}
    </SwitchContext.Provider>
  );
}

export function useSwitchContext() {
  return useContext(SwitchContext);
}

SwitchButton.tsx #

"use client";
import { useSwitchContext } from "./SwitchContext";

export default function SwitchButton() {
  const { toggleMenu } = useSwitchContext();
  return (
    <button type="button" onClick={toggleMenu}>切换菜单</button>
  );
}

Layout.tsx #

"use client";
import SwitchContextProvider from "./SwitchContext";
import SwitchButton from "./SwitchButton";
import MenuOne from "./MenuOne";
import MenuTwo from "./MenuTwo";
import { useSwitchContext } from "./SwitchContext";

function MenuRenderer() {
  const { isMenuOne } = useSwitchContext();
  return <div>{isMenuOne ? <MenuOne /> : <MenuTwo />}</div>;
}

export default function Layout() {
  return (
    <div>
      <SwitchContextProvider>
        <SwitchButton />
        <MenuRenderer />
      </SwitchContextProvider>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Boq7