將如何在styled components中使用map函數來處理資料？

Question

我正在練習如何使用map函數。

我建立了一個json文件，希望使用map函數顯示每個資料。

數據傳遞得很好。但問題是顯示圖像的方式。

圖像都在一個檔案中，顯示圖像的方式是使用background-position來顯示圖像的一部分。

為此，我將'target'的'background-position'數值放入了json檔案中。

問題

# 但我不知道如何傳遞這個數值。嘗試編寫程式碼，但它不起作用。

我認為將值傳遞給樣式組件的方法是錯誤的。我如何顯示不同的圖像？

有問題的地方是id為list__img的地方。

如果您查看codespan，您將更容易理解程式碼。

程式碼

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

資料庫

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

程式碼跨度

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

Answer 1

你可以將參數傳遞到樣式化元件。

但是你的方式不起作用。

將 'list__img' 分開成一個新的樣式化元件，然後你就可以存取這些 props。

或是你可以內嵌樣式化它

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