So lösen Sie das Problem der Schaltflächen-Overlay-Anzeige auf der Restaurant-Website

Question

Ich habe Probleme beim Erstellen einer Schaltfläche auf meiner Restaurant-Website mit React.js und die Overlay-Seite wird nicht richtig angezeigt. Sie werden in einer eigenen Komponente (MenuButtons.jsx) festgelegt und befinden sich unten im kürzeren Menüabschnitt der vorherigen Seite (siehe Abbildung unten). Ich wünschte, sie würden separate Overlay-Seiten für den Rest der Speisekarte (z. B. Weinkarte, Mittagsmenü usw.) einführen, da die gesamte Speisekarte zu lang ist, um alle auf der Titelseite unterzubringen. Das Bild unten zeigt, wie eine Weinkarten-Overlay-Seite aussehen würde.

Hier ist der Code:

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;

Menübereich auf der Startseite der Restaurant-Website

Überlagerungsseite für die Weinkarte der Restaurant-Website

Ich habe versucht, Code aus dem Navigationsleistenbereich (der eine einzelne Overlay-Seite aus dem Hamburger-Menü oben auf der vorherigen Seite startet) wiederzuverwenden, um die Weinkarte als Komponente zu importieren (siehe erster Screenshot unten). Dies funktioniert für die erste Schaltfläche (Wein), aber wenn ich versuche, den Code auf die zweite Schaltfläche (Spirituosen und Liköre) zu kopieren, zeigen sowohl die Überlagerung der Schaltflächen „Wein“ als auch „Spirituosen/Liköre“ den Inhalt der Komponente „Spirituosen und Liköre“ an.

Menüschaltflächencode – Fehler

Jemand hat vorgeschlagen, dass ich den MenuButtons.jsx-Code wie folgt umschreibe (siehe den zweiten Screenshot unten): 1: Deklarieren Sie den Status oben in der Komponente (Zeile 5): const [overlay, setOverlay] = useState(null); 2: Erstellen Sie eine Komponente, die die Zeichenfolge „wines“ als Attribut empfängt und die WinesOverlay-Komponente basierend auf der im Status festgelegten Zeichenfolge rendert (Zeilen 6–14). 3: Setzen Sie „label“ auf den onClick-Handler von „wines“ (Zeile 21).

Ich bin mir nicht sicher, ob ich den Code in MenuButtons.jsx richtig oder in der richtigen Reihenfolge geschrieben habe. Aber der Wein-Button funktioniert nicht, daher weiß ich nicht, ob der neu geschriebene Code dem gewünschten Effekt näher kommt.

Wenn ich den ersten Knopf zum Funktionieren bekomme, sollte der Rest relativ einfach sein. Jeder Rat wird sehr geschätzt.

Menüschaltflächencode – Aktuell

Answer 1

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

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

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