Nextjs をクリックすると新しい div がレンダリングされます

Question

画像があり、同じ画像の大きなバージョンを含む新しい div を (クリックして) 作成したいと考えています。

4つの方法を試してみました:

1. クリック時に div をレンダリング

リーリー

2. カスタムコンポーネント

リーリー

3. 既存の div onClick 非表示クラスの削除

リーリー

4. これは機能しますが、nextjs の画像最適化が失われます

リーリー

どの方法でもコンソールにログが表示されますが、新しい div が表示されるのは方法 4 だけです。

方法 4 が唯一の正しい方法ですか?可能であれば画像コンポーネントを使用したいと思います。どう思いますか？

Answer 1

@Atena Dadkhah、本当にありがとう。あなたの答えは非常に正当です。

プロジェクトには画像が 1 つではなく、多数の画像があるため、最終的なコードは次のようになります:

リーリー

次に、次のような画像が大量に表示されます:

リーリー

次に、隠し div:

リーリー

div を閉じる動作はまだありませんが、これは簡単に追加できるはずです。

＃＃＃また。ありがとう：）＃＃＃

Answer 2

次のようなことを試すことができます:

フックの設定:

リーリー リーリー

このコードでは、基本的に、ユーザーが画像をクリックするたびに変数 zoomImage を true に変更するように Next.JS に指示しているため、デフォルトで非表示になっている大きな画像には表示ブロックが表示されます。 (tailwindcss を使用していると思います)