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;

我想根据道具中的数据更改徽标和操作文字。是否可以在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>
  )
}

使用动态图像映射数据

1 个答案: