React餐厅网站按钮无法正确显示Overlay页面的技术求助

问题分析 #

1. 第一个按钮的onClick回调参数命名错误，用renderOverlay作为参数名覆盖了外部定义的同名函数，导致点击逻辑直接失效。
2. 组件没有在渲染流程中调用renderOverlay来展示选中的Overlay弹窗。
3. 除酒单按钮外，其他按钮未绑定点击事件，也没有对应的Overlay渲染逻辑。

修复步骤 #

1. 修正第一个按钮的onClick参数名（改为e或直接省略，此处无需事件对象）。
2. 在组件返回结构末尾添加{renderOverlay()}，触发选中Overlay的渲染。
3. 为所有按钮绑定onClick事件，设置对应的状态值。
4. 导入所有需要的Overlay组件，用对象映射替代冗余的分支判断，简化renderOverlay逻辑。

完整修复代码 #

import React, { useState } from "react";
import WinesOverlay from "../../components/WinesOverlay/WinesOverlay";
// 请根据实际文件路径导入其余Overlay组件
import SpiritsOverlay from "../../components/SpiritsOverlay/SpiritsOverlay";
import LunchMenuOverlay from "../../components/LunchMenuOverlay/LunchMenuOverlay";
import DinnerMenuOverlay from "../../components/DinnerMenuOverlay/DinnerMenuOverlay";
import SoftDrinksOverlay from "../../components/SoftDrinksOverlay/SoftDrinksOverlay";
import BeveragesOverlay from "../../components/BeveragesOverlay/BeveragesOverlay";

const MenuButtons = () => {
  const [overlay, setOverlay] = useState(null);

  const renderOverlay = () => {
    if (!overlay) return null;

    const overlayMap = {
      wines: <WinesOverlay />,
      spirits: <SpiritsOverlay />,
      lunch: <LunchMenuOverlay />,
      dinner: <DinnerMenuOverlay />,
      softDrinks: <SoftDrinksOverlay />,
      beverages: <BeveragesOverlay />
    };

    return (
      <div className="app__specialMenu-smallscreen">
        {overlayMap[overlay]}
      </div>
    );
  };

  // 可选：添加关闭Overlay逻辑，比如点击弹窗外部时关闭
  const closeOverlay = () => setOverlay(null);

  return (
    <div className="app__specialMenu-buttons">
      <button
        onClick={() => setOverlay("wines")}
        type="button"
        className="custom__button"
      >
        WINES
      </button>

      <button
        onClick={() => setOverlay("spirits")}
        type="button"
        className="custom__button"
      >
        SPIRITS & LIQUEURS
      </button>

      <button
        onClick={() => setOverlay("lunch")}
        type="button"
        className="custom__button"
      >
        LUNCH MENU
      </button>

      <button
        onClick={() => setOverlay("dinner")}
        type="button"
        className="custom__button"
      >
        DINNER MENU
      </button>

      <button
        onClick={() => setOverlay("softDrinks")}
        type="button"
        className="custom__button"
      >
        SOFT DRINKS
      </button>

      <button
        onClick={() => setOverlay("beverages")}
        type="button"
        className="custom__button"
      >
        BEVERAGES
      </button>

      {/* 渲染选中的Overlay弹窗 */}
      {renderOverlay()}
    </div>
  );
};

export default MenuButtons;

额外说明 #

• 请确保所有Overlay组件的导入路径正确，且组件本身能正常渲染。
• 若需要点击弹窗外部关闭功能，可在Overlay组件内部添加事件监听阻止冒泡，或在弹窗容器div上绑定onClick={closeOverlay}。
• 使用overlayMap对象替代多个else if分支，让代码更简洁易维护。

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