Comment utiliseriez-vous la fonction map dans des composants stylisés pour traiter les données ?

Question

Je m'entraîne à utiliser la fonction carte.

J'ai créé un fichier json et je souhaite afficher chaque donnée à l'aide de la fonction map.

Les données sont très bien transférées. Mais le problème réside dans la façon dont l’image est affichée.

Les images sont toutes dans un seul fichier, et la façon d'afficher l'image est d'utiliser background-position pour afficher une partie de l'image.

Pour ce faire, j'ai mis la valeur 'background-position' de 'target' dans un fichier json.

Question

Mais je ne sais pas comment transmettre cette valeur numérique. J'ai essayé d'écrire du code mais ça ne marche pas.

Je pense que la façon de transmettre la valeur au composant de style est erronée. Comment afficher différentes images ?

L'endroit problématique est l'endroit avec l'identifiant list__img.

Si vous regardez le codepan, il vous sera plus facile de comprendre le code.

Code

import { useState } from "react";
import styled from "styled-components";
import dummy from "./database/DB.json";

export default function App() {
  const [data, setData] = useState(dummy.products);

  return (
    <Wrap>
      <div className="characterList">
        <div className="word">
          <h2 className="word__font">Like Pick!</h2>
        </div>
        <div className="list">
          <ul className="list__ul">
            {data.map((item) => {
              return (
                <div className="list__box">
                  <Card key={item.id} item={item} />
                </div>
              );
            })}
          </ul>
        </div>
      </div>
    </Wrap>
  );
}

// I think I need to deliver the value here
function Card({ item }) {
  return (
    <div className="list__wrap">
      <div className="list__img" />
      {item.nameKr}
    </div>
  );
}

const Wrap = styled.div`
  border: 1px solid black;
  position: relative;
  top: calc(50vh - 100px);
  width: 1200px;
  display: inline-flex;

  .characterList {
    border: 1px solid red;
  }

  .word {
    margin: 0 auto;
    width: 1200px;
  }

  .word__font {
    font-family: "SFCompactDisplay-Bold", sans-serif;
    font-weight: bold;
    font-size: 38px;
    margin-bottom: 25px;
    text-align: center;
  }

  .list {
    border: 3px solid grey;
    margin: 0 auto;
    width: 1200px;
    padding-bottom: 20px;
  }

  .list__ul {
    display: inline-flex;
    list-style: none;
  }

  .list__box {
    margin: 0 9px;
    text-align: center;
    font-size: 17px;
  }

  .list__wrap {
    color: #333;
    font-size: 13px;
    display: inline-block;
    text-align: center;
  }

  .list__img {
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    background-size: 100%;
    margin-bottom: 5px;
    /* 这部分是问题所在 */
    background-position: 0 {item.position}%;
  }
`;

Base de données

{
  "products": [
    {
      "id": "1",
      "name": "choosik",
      "nameKr": "춘식이",
      "position": 17.647059
    },
    {
      "id": "2",
      "name": "ryan",
      "nameKr": "라이언",
      "position": 88.235295
    },
    {
      "id": "3",
      "name": "apeach",
      "nameKr": "어피치",
      "position": 5.882353
    }
  ]
}

Étendue du code

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

Answer 1

Vous pouvez transmettre des paramètres dans des composants stylisés.

Mais votre méthode ne fonctionne pas.

Divisez 'list__img' en un nouveau composant stylisé, vous pourrez alors accéder à ces accessoires.

Ou vous pouvez le styliser en ligne

<div className="list__img" style={{backgroundPosition: `0 ${item.position}%`}} />