マップ機能の使い方を練習しています。
jsonファイルを作成したので、map関数を使って各データを表示したいと思います。
データは非常にうまく転送されます。しかし、問題は画像の表示方法です。
画像はすべて 1 つのファイル内にあり、画像を表示する方法は、background-position
を使用して画像の一部を表示することです。
これを行うには、「target」の「background-position」値を json ファイルに入力します。
######質問######### しかし、この数値を渡す方法がわかりません。コードを書いてみましたが、うまくいきません。styleコンポーネントに値を渡す方法が間違っていると思います。異なる画像を表示するにはどうすればよいですか?
問題のある場所は、IDlist__img
の場所です。 コードスパンを見るとコードが理解しやすくなります。
######コード######
リーリー
データベース
リーリー
コードスパン
https://codesandbox.io/s/characterselectmap-t2mqef?file=/src/App.js:0-1990P粉0424552502024-03-31 16:07:42
スタイル付きコンポーネントにパラメータを渡すことができます。
しかし、あなたのやり方はうまくいきません。
「list__img」を新しいスタイル付きコンポーネントに分割すると、これらのプロパティにアクセスできるようになります。
または、インラインでスタイルを設定することもできます
リーリー