使用动态图像映射数据

Question

所以我有以下反应组件

import React from "react";
import ReactDOM from "react-dom";

/// Get out static assets
import logo1 from '../images/scaffold/logo1.svg';
import logo2 from '../images/scaffold/logo2.svg';
import logo3 from '../images/scaffold/logo3.svg';
import logo4 from '../images/scaffold/logo4.svg';
import logo5 from '../images/scaffold/logo5.svg';
import logo6 from '../images/scaffold/logo6.svg';
import logo7 from '../images/scaffold/logo7.svg';

const Links = (props) => {
  return (
    <div>
    {Object.keys(props.link).map(i => (
      <a key={i} href={props.link[i]}
      target="_blank">
      <div className="release-action">
      <div className="release-distro-logo">
      <img src={logo1}/>
      </div>
      <span>Action1</span>
      </div>
      </a>
    ))}
    </div>
  )
}

export default Links;

我想根据来自 props 的数据更改 logo 和 action 文本。是否可以在 if 语句中使用值对的键来执行此操作？因此，例如，如果键是 link2，则将使用 logo2 并且跨度将更改为 Action2 基本上徽标会直观地呈现链接并且链接 URL 将在链接 src 中使用。

链接通过 json 加载并通过 props 推送到组件

"isbn" : "3049204",
"author" : "author name",
"links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  },
"cta" : "buy now"

Answer 1

一种解决方案是创建一个包含所有可用图像的对象，如下所示：

const logos = {
 link1: logo1,
 link2: logo2,
 // ...
};

然后在 React 中

const Links = (props) => {
  return (
    <div>
    {Object.keys(props.link).map(i => (
      <a key={i} href={props.link[i]}
      target="_blank">
      <div className="release-action">
      <div className="release-distro-logo">
      <img src={logos[i]}/>
      </div>
      <span>Action1</span>
      </div>
      </a>
    ))}
    </div>
  )
}