坚持在props中添加图片url和普通url

Question

因此，我一直在修补代码，并添加了一些额外的东西，然而，我现在卡住了，因为我试图使用道具的图像和外部链接，但我没有让它通过。一旦一切正常，我将更改一些名称。我的链接代码如下

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;

我通过下面的代码通过Hulk组件进行调用

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;

Answer 1

"this“只在类组件中使用，而不是在功能组件中使用(您的组件"Hulk”是一个功能组件！)

// Functional component :
import React from 'react'

export default function FunctionalComponent() {
  return (
    <div>
      
    </div>
  )
}


// Class component :
import React, { Component } from 'react'

export default class ClassComponent extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

关于你的问题有两种情况：

1. 您没有子组件，但您想要显示“复仇者联盟”数据。

1. 您有一个子组件，并且您希望在此组件中显示“复仇者联盟”数据。

第一个案例：

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>
      ))}
    </>
  );
}

• 您需要使用.map()来显示您的data
• 您不需要使用“
• ”，因为在这种情况下，您没有子组件。

演示：stackblitz

第二个案例：

父组件(发送道具)：

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>
  );
}

• 您需要在父组件中使用.map()来显示两个组件中的数据:直接在父组件中显示数据，以及使用子组件中的属性显示数据

演示：Stackblitz