Bagaimana untuk menyelesaikan masalah paparan tindanan butang di laman web restoran

Question

Saya menghadapi masalah membina butang pada tapak web restoran saya menggunakan React.js dan halaman tindanan tidak dipaparkan dengan betul. Ia ditetapkan dalam komponennya sendiri (MenuButtons.jsx) dan terletak di bahagian bawah bahagian menu yang lebih pendek pada halaman sebelumnya (lihat imej di bawah). Saya harap mereka akan melancarkan halaman tindanan berasingan untuk menu yang lain (cth. senarai wain, menu makan tengah hari, dsb.) memandangkan menu penuh terlalu panjang untuk memuatkan semua pada halaman depan. Imej di bawah menunjukkan rupa halaman tindanan senarai wain.

Ini kodnya:

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;

Bahagian menu di muka depan laman web restoran

Halaman tindanan senarai wain laman web restoran

Saya cuba menggunakan semula beberapa kod daripada bahagian bar navigasi (yang melancarkan halaman tindanan tunggal daripada menu hamburger di bahagian atas halaman sebelumnya) untuk mengimport senarai wain sebagai komponen (lihat tangkapan skrin pertama di bawah). Ini berfungsi untuk butang pertama (wain), tetapi apabila saya cuba menyalin kod ke butang kedua (semangat dan minuman keras), kedua-dua tindanan butang wain dan spirit/liqueur menunjukkan semangat dan minuman keras Kandungan komponen.

Kod Butang Menu - Ralat

Seseorang mencadangkan saya menulis semula kod MenuButtons.jsx seperti berikut (lihat tangkapan skrin kedua di bawah): 1: Isytiharkan keadaan di bahagian atas komponen (baris 5): const [overlay, setOverlay] = useState(null); 2: Buat komponen yang menerima rentetan "wain" sebagai atribut dan menjadikan komponen WinesOverlay berdasarkan rentetan yang ditetapkan dalam keadaan (baris 6-14). 3: Tetapkan "label" kepada pengendali onClick "wain" (baris 21).

Tidak pasti sama ada saya menulis kod dalam MenuButtons.jsx dengan betul atau mengikut susunan yang betul. Tetapi butang wain tidak berfungsi, jadi saya tidak tahu sama ada kod yang ditulis semula lebih dekat dengan kesan yang diingini.

Jika saya boleh mendapatkan butang pertama untuk berfungsi, selebihnya sepatutnya agak mudah. Sebarang nasihat amatlah dihargai.

Kod Butang Menu - Semasa

Answer 1

Apabila menggunakan onClick, nampaknya anda tidak menghantar 'nilai' kepada renderOverlay dan anda mengisytiharkan butang onClick pada Wines secara salah. Anda menggunakan fungsi anak panah sebaris yang baru sahaja mengemas kini nilai tindanan anda kepada "wain" dan tidak memanggil renderOverlay di mana-mana sahaja. {(rendeOverlay) => ... Di sini fungsi diluluskan sebagai parameter dan bukannya memanggilnya. Tolong betulkan macam ni.

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

Jika anda mempunyai sebarang pertanyaan, sila beritahu saya.