如何解决餐厅网站按钮覆盖层显示问题

Question

我在使用React.js构建餐厅网站上的按钮时遇到了问题，无法正确显示叠加页面。它们在自己的组件(MenuButtons.jsx)中设置，并位于前页较短菜单部分的底部(见下图)。我希望它们能够为菜单的其余部分(例如葡萄酒列表、午餐菜单等)启动单独的叠加页面，因为完整的菜单太长，无法全部包含在前页上。下图显示了葡萄酒列表叠加页面的样子。

以下是代码：

import React, { useState } from "react";
   import WinesOverlay from 
   "../../components/WinesOverlay/WinesOverlay";

const MenuButtons = () => {
  const [overlay, setOverlay] = useState(null);
  const renderOverlay = (value) => {
    if (!value) {
      return;
    } else if (value === "wines") {
      return (
        <div className="app__specialMenu-smallscreen">
          <WinesOverlay />
        </div>
      );
    }
  };

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

      <button type="button" className="custom__button">
        SPIRITS & LIQUEURS
      </button>

      <button type="button" className="custom__button">
        LUNCH MENU
      </button>

      <button type="button" className="custom__button">
        DINNER MENU
      </button>

      <button type="button" className="custom__button">
        SOFT DRINKS
      </button>

      <button type="button" className="custom__button">
        BEVERAGES
      </button>
    </div>
  );
};

export default MenuButtons;

餐厅网站前页菜单部分

餐厅网站葡萄酒列表叠加页面

我尝试重新使用导航栏部分的一些代码(该导航栏从前页顶部的汉堡菜单启动单个叠加页面)来导入葡萄酒列表作为组件(见下图第一张截图)。这对于第一个按钮(葡萄酒)有效，但当我尝试复制代码到第二个按钮(烈酒和利口酒)时，葡萄酒和烈酒/利口酒按钮的叠加页面都显示了烈酒和利口酒组件的内容。

菜单按钮代码-错误

有人建议我重写MenuButtons.jsx代码如下(见下图第二张截图)： 1: 在组件顶部声明状态(第5行)：const [overlay, setOverlay] = useState(null); 2: 创建一个组件，该组件接收字符串"wines"作为属性，根据状态中设置的字符串渲染WinesOverlay组件(第6-14行)。 3: 将"label"设置为"wines"的onClick处理程序(第21行)。

不确定我是否正确编写了MenuButtons.jsx中的代码，或者是否按正确的顺序。但是葡萄酒按钮不起作用，所以我不知道重写的代码是否更接近所需的效果。

如果我能让第一个按钮正常工作，其他的应该相对简单。非常感谢任何建议。

菜单按钮代码-当前

Answer 1

在使用onClick时，似乎你没有将'value'传递给renderOverlay，而且你错误地声明了Wines按钮的onClick。 你使用了一个内联箭头函数，它只是将你的overlay值更新为"wines"，并没有在任何地方调用renderOverlay。 {(rendeOverlay) => ... 这里将函数作为参数传递，而不是调用它。 请像这样进行修正。

<button
   onClick={() => {
      renderOverlay("wines");
   }} />

如有任何疑问，请告诉我。