javascript - 坚持在道具中添加图片网址和普通网址

问题描述

所以我一直在修改代码并添加一些额外的东西，但是我现在卡住了，因为我正在尝试为图像和外部链接使用道具，但我没有得到它。一旦一切正常，我将更改一些名称。我的链接代码如下

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;

标签： javascriptreactjs

解决方案

“ this ” 仅在Class 组件中使用，而不在 Functional 组件中使用（并且您的组件“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>
    )
  }
}

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

您没有子组件并且想要显示“复仇者联盟”数据。
您有一个子组件，并且您想在该组件中显示“复仇者联盟”数据。

第一种情况：

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() 来显示您的数据
您不需要使用“道具”，因为在这种情况下您没有子组件。

演示：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

javascript - 坚持在道具中添加图片网址和普通网址

问题描述

解决方案

推荐阅读