![](/img/trans.png)
[英]React - How to use hook useState props to create a map function
[英]How do i use props & map function to insert image urls for cards with logos using React?
我正在從事一個個人項目,其中 NFL 數據按團隊顯示。 我剛剛學習 React,想知道如何使用數組中的 props 和 map 圖像 url 來顯示多個 NFL 標志卡。 我已經嚴格使用 css、html 和 javascript 創建了一個類似的網站,但需要在 React 中進行,無論如何,這就是我所擁有的:
首頁.js
import React from "react"
import { Link} from "react-router-dom"
import Box from '@material-ui/core/Box';
const teams = [
{
id: 1,
teamName: "Kansas City Cheifs",
urlImage: "public/chiefs_logo.jpg"
},
{
id: 2,
teamName: "Cincinatti Bengals",
urlImage: "public/Bengals.jpg"
},
{
id: 3,
teamName: "Denver Broncos",
urlImage: "public/Denver-Broncos-symbol.jpeg"
},
{
id: 4,
teamName: "Carolina Panthers",
urlImage: "public/panthers.png"
}
];
export default function Home(props) {
return (
<div className="Team-Box">
const teamCards = teams.map(team => )
<Box className="Box" key={teams.id} background-image={props.urlImage}/>
<Box className="Box" background-image={props.urlImage}/>
<Link to="/Home"></Link>
</div>
)
}
[我希望它看起來像什么][2]
[2]: https://i.stack.imgur.com/KK0tw.jpg ,所有 32 支 NFL 球隊除外
在你的回報里面你想要這樣的東西。
return (
<div>
{teams.map((team) => (
<div key={team.id} className='Team-Box'>
<Box
className='Box'
style={{ backgroundImage: `url(${team.imageUrl})` }}
/>
</div>
))}
<Link to='/Home'></Link>
</div>
);
如果您想將一些數據作為 props 傳遞給負責顯示每個團隊信息的 Card 組件,那么這會是什么樣子。
import { useState } from 'react';
const initialTeams = [
{
id: 1,
teamName: 'Kansas City Chiefs',
urlImage: 'public/chiefs_logo.jpg',
},
{
id: 2,
teamName: 'Cincinatti Bengals',
urlImage: 'public/Bengals.jpg',
},
{
id: 3,
teamName: 'Denver Broncos',
urlImage: 'public/Denver-Broncos-symbol.jpeg',
},
{
id: 4,
teamName: 'Carolina Panthers',
urlImage: 'public/panthers.png',
},
];
const Card = ({ imageUrl, teamName }) => (
<div className='team-card' style={{ backgroundImage: `url(${imageUrl})` }}>
{teamName}
</div>
);
const Home = () => {
const [teams, setTeams] = useState(initialTeams);
return (
<div>
{teams.map(({ id, imageUrl, teamName }) => (
<Card key={id} imageUrl={imageUrl} teamName={teamName} />
))}
</div>
);
};
export default Home;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.