데이터를 처리하기 위해 스타일이 지정된 구성요소의 지도 기능을 어떻게 사용하시겠습니까?

Question

지도 기능 사용법을 연습하고 있어요.

json 파일을 생성했고, 지도 기능을 이용하여 각 데이터를 표시하고 싶습니다.

데이터가 아주 잘 전송됩니다. 하지만 문제는 이미지가 표시되는 방식입니다.

이미지는 모두 하나의 파일로 되어 있으며, 이미지를 표시하는 방법은 background-position를 사용하여 이미지의 일부를 표시하는 것입니다.

이를 위해 'target'의 'Background-position' 값을 json 파일에 넣었습니다.

질문

그런데 이 수치를 어떻게 전달해야 할지 모르겠습니다. 코드 작성을 시도했지만 작동하지 않습니다.

스타일 컴포넌트에 값을 전달하는 방식이 잘못된 것 같습니다. 다양한 이미지를 표시하려면 어떻게 해야 하나요?

문제의 장소는 ID가 list__img인 장소입니다.

codespan을 보시면 코드를 이해하기가 더 쉬울 것입니다.

코드

으아악

데이터베이스

으아악

코드 범위

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

Answer 1

스타일이 지정된 구성요소에 매개변수를 전달할 수 있습니다.

하지만 당신의 방식은 작동하지 않습니다.

'list__img'를 새로운 스타일의 구성 요소로 분할하면 이러한 소품에 액세스할 수 있습니다.

또는 인라인으로 스타일을 지정할 수도 있습니다

으아아아