Bagaimanakah anda menggunakan fungsi peta dalam komponen bergaya untuk memproses data?

Question

Saya sedang berlatih cara menggunakan fungsi peta.

Saya telah mencipta fail json dan ingin memaparkan setiap data menggunakan fungsi peta.

Data dipindahkan dengan sangat baik. Tetapi masalahnya ialah cara imej dipaparkan.

Semua imej berada dalam satu fail dan cara untuk memaparkan imej adalah dengan menggunakan background-position untuk memaparkan sebahagian daripada imej.

Untuk melakukan ini, saya meletakkan nilai 'background-position' bagi 'target' ke dalam fail json.

Soalan

Tetapi saya tidak tahu bagaimana untuk melepasi nilai berangka ini. Cuba menulis kod tetapi ia tidak berfungsi.

Saya fikir cara menghantar nilai kepada komponen gaya adalah salah. Bagaimanakah saya memaparkan imej yang berbeza?

Tempat yang bermasalah ialah tempat yang ada id list__img.

Jika anda melihat pada codespan adalah lebih mudah untuk anda memahami kod tersebut.

Kod

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}%;
  }
`;

Pangkalan data

{
  "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
    }
  ]
}

Span kod

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

Answer 1

Anda boleh menghantar parameter ke dalam komponen yang digayakan.

Tetapi cara anda tidak berkesan.

Pisah 'list__img' kepada komponen gaya baharu, kemudian anda boleh mengakses prop ini.

Atau anda boleh menggayakannya sebaris

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