Javascript 无法在道具中添加图像url和普通url

所以我一直在修改一段代码，并在其中添加了一些额外的东西，但我现在陷入了困境，因为我试图使用道具来制作图像和外部链接，但我没有做到这一点。一旦一切顺利，我会改变一些名字。下面是我的代码和链接

export const avengers = [
  {
    id: 1,
    name: 'Bruce Banner',
    username: 'Hulk',
    icon: 'https://www.superherodb.com/pictures2/portraits/10/050/83.jpg?v=1602236687',
    link: 'https://marvelcinematicuniverse.fandom.com/wiki/Hulk'
  },
  {
    id: 2,
    name: 'Steve Rogers',
    username: 'Cap',
    icon: 'https://www.superherodb.com/pictures2/portraits/10/050/274.jpg?v=1599853488',
    link: "https://marvelcinematicuniverse.fandom.com/wiki/Captain_America"
  },
  {
    id: 3,
    name: 'Clint Barton',
    username: 'Hawkeye',
    icon: 'https://www.superherodb.com/pictures2/portraits/10/050/73.jpg?v=1597500181',
    link: "https://marvelcinematicuniverse.fandom.com/wiki/Hawkeye"
  },

我在这里传递道具

import React from 'react';

const Hulk = (props) => {
  return (
    <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
      <img alt="avengers" className="photo" src={this.props.icon} />
      <div>
        <h2>{props.name}</h2>
        <p>{props.email}</p>
        <a href={this.props.link} target="_blank" rel="noreferrer">
          To learn more about {props.name}
        </a>
      </div>
    </div>
  );
};

export default Hulk;

从“React”导入React；
康斯特绿巨人=（道具）=>{
返回(
{props.name}
{props.email}

);
};
导出默认绿巨人；

我通过下面的代码通过绿巨人组件调用

import React from 'react';

const AvengersList = ({ avengers }) => {
    const avengersComponent = avengers.map((user, i) => {
        return (
        <Hulk
        key={i}
        id={avengers[i].id}
        name={avengers[i].name}
        email={avengers[i].email}
        />
    );
})

return (
 <div>
 {avengersComponent}
 </div>
);
}

export default AvengersList;

从“React”导入React；
const AvengersList=（{avengers}）=>{
const avengersComponent=avengers.map（（用户，i）=>{
返回(
);
})
返回(
{avengersComponent}
);
}
导出默认复仇者列表；

“此”仅在类组件中使用，而不在功能组件中使用（您的组件“绿巨人”是一个功能组件！）

//功能组件：
从“React”导入React
导出默认函数FunctionalComponent（）{
返回(
)
}
//类组件：
从“React”导入React，{Component}
导出默认类ClassComponent扩展组件{
render（）{
返回(
)
}
}

关于您的问题，有两种情况：

您没有子组件，并且希望显示 “复仇者”数据

您有一个子组件，希望显示“复仇者” 此组件中的数据

---

第一种情况：

import React from "react";
    
// import your data
import avengers from "./data";

export default function Hulk() {
  return (
    <>
      {avengers.map(avenger => (
        <div
          key={avenger.id}
          className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5"
        >
          <img alt="avengers" className="photo" src={avenger.icon} />
          <div>
            <h2>{avenger.name}</h2>
            <p>{avenger.email}</p>
            <a href={avenger.link} target="_blank" rel="noreferrer">
              To learn more about {avenger.name}
            </a>
          </div>
        </div>
      ))}
    </>
  );
}

从“React”导入React；
//导入数据
从“/data”导入复仇者；
导出默认函数Hulk（）{
返回(
{复仇者地图（复仇者=>(
{复仇者姓名}
{avenger.email}

))}
);
}

• 您需要使用.map（）来显示数据
• 您不需要使用“道具”，因为在这种情况下，您没有子组件

演示：

---

第二种情况：

import React from "react";
    
// import your data
import avengers from "./data";

export default function Hulk() {
  return (
    <>
      {avengers.map(avenger => (
        <div
          key={avenger.id}
          className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5"
        >
          <img alt="avengers" className="photo" src={avenger.icon} />
          <div>
            <h2>{avenger.name}</h2>
            <p>{avenger.email}</p>
            <a href={avenger.link} target="_blank" rel="noreferrer">
              To learn more about {avenger.name}
            </a>
          </div>
        </div>
      ))}
    </>
  );
}

父组件（发送道具的人员）：

从“React”导入React；
//导入数据
从“/data”导入复仇者；
//导入子组件
从“/DetailsCpt”导入DetailsCpt；
导出默认函数Hulk（）{
返回(
{复仇者地图（复仇者=>(
))}
);
}

子组件（接收道具的成员）：

从“React”导入React；
导出默认函数DetailsCpt（{props}）{
返回(
{props.name}
{props.email}

);
}

• 您需要在父组件中使用.map（）来显示两个组件中的数据：直接在父组件中显示数据，并在子组件中使用道具显示数据

---

演示：

这完全取决于您如何调用

Hulk

组件，但如果我不得不猜测，我会说try:

src={props.icon}

而不是

src={this.props.icon}

import React from "react";

// import your data
import avengers from "./data";

// import your child component
import DetailsCpt from "./DetailsCpt";

export default function Hulk() {
  return (
    <>
      {avengers.map(avenger => (
        <div
          key={avenger.id}
          className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5"
        >
          <img alt="avengers" className="photo" src={avenger.icon} />
          <DetailsCpt props={avenger} />
        </div>
      ))}
    </>
  );
}

import React from "react";

export default function DetailsCpt({ props }) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.email}</p>
      <a href={props.link} target="_blank" rel="noreferrer">
        To learn more about {props.name}
      </a>
    </div>
  );
}