将如何在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}%`}} />