React コンポーネント内の関数からの予期しない出力

Question

2 つの画像 ( IMG と IMG2 ) をインポートしました。 IMG はビューポート幅が 600px 未満の場合に表示され、ビューポート幅が 600px 以上の場合は別の IMG が表示されると想定されます。そこで、ビューポートの幅をチェックする関数を追加し、これら 2 つの画像のうちの 1 つを返します。しかし、問題は、この関数が関数に指定した最初の画像 (IMG) のみを返すことです。ビューポートの幅が 600px より大きくなっても、IMG2 ではなく IMG が表示されます。注: メディア クエリを使用し、表示を None に設定するだけでこの問題を解決できますが、React を使用してこの問題を解決する方法を知りたいです。

Github のすべてのコードへのリンク: https://github.com/Iskamath/PerfumeProduct.com

リーリー ああああ

Answer 1

これを React で行うには、ドキュメントのサイズ変更イベントにアタッチする必要があります。

以下は、サイズ変更時にテキストと背景色を変更する簡単な例です。

リーリー リーリー