Wie würden Sie die Kartenfunktion in gestalteten Komponenten verwenden, um Daten zu verarbeiten?

Question

Ich übe den Umgang mit der Kartenfunktion.

Ich habe eine JSON-Datei erstellt und möchte alle Daten mithilfe der Kartenfunktion anzeigen.

Die Daten werden sehr gut übertragen. Das Problem ist jedoch die Art und Weise, wie das Bild angezeigt wird.

Die Bilder befinden sich alle in einer Datei und Sie können das Bild anzeigen, indem Sie background-position verwenden, um einen Teil des Bildes anzuzeigen.

Dazu habe ich den „background-position“-Wert von „target“ in eine JSON-Datei eingefügt.

Frage

Aber ich weiß nicht, wie ich diesen numerischen Wert übergeben soll. Ich habe versucht, Code zu schreiben, aber es funktioniert nicht.

Ich denke, die Art und Weise, wie der Wert an die Stilkomponente übergeben wird, ist falsch. Wie zeige ich verschiedene Bilder an?

Der problematische Ort ist der Ort mit Ausweis list__img.

Wenn Sie sich Codespan ansehen, wird es für Sie einfacher, den Code zu verstehen.

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

Datenbank

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

Codespanne

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