飲食店サイトのボタンオーバーレイ表示問題の解決方法

Question

React.js を使用してレストラン Web サイトにボタンを作成する際に問題が発生し、オーバーレイ ページが正しく表示されません。これらは独自のコンポーネント (MenuButtons.jsx) に設定され、前のページの短いメニュー セクションの下部にあります (下の画像を参照)。フルメニューは長すぎてフロントページにすべてを収まらないため、残りのメニュー（ワインリスト、ランチメニューなど）については別のオーバーレイページを立ち上げてほしいと思います。下の画像は、ワインリストのオーバーレイ ページがどのように見えるかを示しています。

以下はコードです:

リーリー

レストランのウェブサイトのトップページのメニューセクション

レストランウェブサイトのワインリストオーバーレイページ

ナビゲーション バー セクションのコード (前のページの上部にあるハンバーガー メニューから 1 つのオーバーレイ ページを起動します) を再利用して、ワイン リストをコンポーネントとしてインポートしてみました (下の最初のスクリーンショットを参照)。これは最初のボタン (ワイン) では機能しますが、コードを 2 番目のボタン (スピリッツとリキュール) にコピーしようとすると、ワインとスピリッツ/リキュールの両方のボタン オーバーレイにスピリッツとリキュール コンポーネントのコンテンツが表示されます。

メニューボタンのコードエラー

誰かが、MenuButtons.jsx コードを次のように書き直すことを提案しました (下の 2 番目のスクリーンショットを参照)。 1: コンポーネントの先頭で状態を宣言します (5 行目): const [overlay, setOverlay] = useState(null); 2: 文字列「ワイン」を属性として受け取り、状態に設定された文字列に基づいて WinesOverlay コンポーネントをレンダリングするコンポーネントを作成します (行 6 ～ 14)。 3: 「wines」のonClickハンドラに「label」を設定します（21行目）。

MenuButtons.jsx のコードを正しく記述したか、正しい順序で記述したかわかりません。ただし、ワインボタンは機能しないため、書き換えられたコードが目的の効果に近づいているかどうかはわかりません。

最初のボタンを機能させることができれば、他のボタンは比較的簡単になるはずです。アドバイスをいただければ幸いです。

メニュー ボタン コード - 現在の

Answer 1

onClick を使用する場合、renderOverlay に「値」を渡しておらず、Wines ボタンの onClick を間違って宣言しているようです。 オーバーレイ値を「ワイン」に更新するだけのインライン矢印関数を使用し、どこにも renderOverlay を呼び出しませんでした。 {(rendeOverlay) => ... ここでは、関数を呼び出すのではなく、パラメーターとして渡します。 このように修正してください。

リーリー

ご質問がございましたら、お知らせください。