我如何使我的餐厅网站按钮显示正确的叠加?

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;

餐厅网站首页菜单区

餐厅网站酒单叠加页

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

菜单按钮代码错误

有人建议我重写菜单按钮。JSX代码如下(见下面第二个截图):1:在组件的顶部声明状态(第5行):const [overlay, setooverlay] = useState(null);2:创建一个接收字符串"葡萄酒"的组件;作为一个基于在state中设置的字符串的道具，并渲染WinesOverlay组件(第6-14行)。3:添加"葡萄酒"标签;到onClick处理程序(第21行)

不确定我是否在菜单按钮中编写了代码。JSX正确地或以正确的顺序。但是wines按钮没有做任何事情，所以我不知道重写的代码是否更接近它需要的样子。

如果我能让第一个按钮正常工作，剩下的应该相当简单。如有任何建议，不胜感激。

菜单按钮代码-当前

Answer 1

看起来你并没有将'值'传递给renderOverlay，同时使用onClick，而且你已经错误地声明了onClick for Wines按钮。因为你已经使用了一个内联箭头函数，它只是更新你的覆盖值为"并且不在任何地方调用renderOverlay。{(rendeOverlay) =祝辞……这是将函数作为参数传递，而不是调用它。像这样改正

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

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