スタイル付きコンポーネントでマップ関数を使用してデータを処理するにはどうすればよいでしょうか?

Question

マップ機能の使い方を練習しています。

jsonファイルを作成したので、map関数を使って各データを表示したいと思います。

データは非常にうまく転送されます。しかし、問題は画像の表示方法です。

画像はすべて 1 つのファイル内にあり、画像を表示する方法は、background-position を使用して画像の一部を表示することです。

これを行うには、「target」の「background-position」値を json ファイルに入力します。

＃＃＃＃＃＃質問＃＃＃＃＃＃＃＃＃ しかし、この数値を渡す方法がわかりません。コードを書いてみましたが、うまくいきません。

styleコンポーネントに値を渡す方法が間違っていると思います。異なる画像を表示するにはどうすればよいですか?

問題のある場所は、ID

list__img

の場所です。

コードスパンを見るとコードが理解しやすくなります。

＃＃＃＃＃＃コード＃＃＃＃＃＃ リーリー データベース

リーリー

コードスパン

https://codesandbox.io/s/characterselectmap-t2mqef?file=/src/App.js:0-1990

Answer 1

スタイル付きコンポーネントにパラメータを渡すことができます。

しかし、あなたのやり方はうまくいきません。

「list__img」を新しいスタイル付きコンポーネントに分割すると、これらのプロパティにアクセスできるようになります。

または、インラインでスタイルを設定することもできます

リーリー