我正在练习如何使用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
P粉0424552502024-03-31 16:07:42
你可以将参数传递到样式化组件中。
但是你的方式不起作用。
将 'list__img' 分离成一个新的样式化组件,然后你就可以访问这些 props。
或者你可以内联样式化它
<div className="list__img" style={{backgroundPosition: `0 ${item.position}%`}} />