reactjs - 我目前有一个对象数组，每个对象都有投资组合中每个项目的道具：将显示的名称、ID 和图像

Question

我目前正在使用 React 进行投资组合，我有一个问题。

我目前有一个对象数组，每个对象都有投资组合中每个项目的道具：名称、职位、ID 和将显示的图像。我有显示一些信息（姓名和职位）的卡片，但我无法像处理姓名和职位那样将图像与每个 ID 连接起来。

<img alt='players' src={} /> 

感谢您的帮助和时间。

export const players = [
  {
    id: 1,
    name: 'name1',
    position: 'striker',
    photo: `./pictures/player1.jpg`
},
  {
    id: 2,
    name: 'name2',
    position: 'center midfield'
    photo: `./pictures/player2.jpg`
  },
...


//Card

import React from 'react';

const Card = (props) => {
      return(
         <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-1'>
           <img alt='players' src={props.photo} />
           <div> 
            <h2>{props.name}</h2> 
            <p>{props.position}</p>             
          </div>
         </div>
        );
}

export default Card;



//Card List 

import React from 'react';
import  Card from './Card';


const CardList = ({ players }) => {
   return (
    <div>
    {
      players.map((user,i) => {
       return (
        <Card 
         key={i} 
         id={players[i].id} 
         name={players[i].name} 
         position={players[i].position}
         photo={players[i].photo}
         />
         );
       })
      }
    </div> 
   );
}

export default CardList;

标签： reactjs