我如何使用道具和地图功能使用 React 为带有徽标的卡片插入图像网址？

Question

我正在进行一个个人项目，其中 NFL 数据按团队显示。我刚刚学习 React，想知道如何使用数组中的 props 和映射图像 url 来显示多个 NFL 标志卡。我已经严格使用 css、html 和 javascript 制作了一个类似的网站，但需要在 React 中进行，无论如何，这就是我所拥有的：

Home.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>
            
        
    )
}

What it looks like so far

[我想要的样子][2]

[2]：https://i.stack.imgur.com/KK0tw.jpg，所有 32 支 NFL 球队除外

Answer 1

在你的 return 里面你想要这样的东西。

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;

我如何使用道具和地图功能使用 React 为带有徽标的卡片插入图像网址？

How do i use props & map function to insert image urls for cards with logos using React?

javascript

mapping

reactjs

react-props