Javascript 基于传递的属性“呈现SVG”；“元素”；

元素

将是“小列表”、“中列表”或“大列表”。现在我的目标是，如果

元素

是，例如，清单_small，那么我的组件将呈现导入的SVG

清单_small

。然而，这并没有达到预期的效果

import React from "react";
import listing_small from "assets/elements/listing_small.svg";
import listing_medium from "assets/elements/listing_medium.svg";
import listing_large from "assets/elements/listing_large.svg";
import { getElementName } from "utils/enums";

const ElementPreview = ({ element }) => {
  return <img src={element} alt={getElementName(element)} />;
};

export default ElementPreview;

从“React”导入React；
从“assets/elements/listing_small.svg”导入清单_small；
从“assets/elements/listing_media.svg”导入列表_media；
从“assets/elements/listing_large.svg”导入清单_large；
从“utils/enums”导入{getElementName}；
常量元素预览=（{element}）=>{
返回；
};
导出默认元素预览；

您可以创建一个对象，其中包含svg src作为值，而

列表*

作为键

让它像：

const ELEMENTS = {
  listing_small, // its the same as listing_small: listing_small
  listing_medium,
  listing_large
}

const ElementPreview = ({ element }) => {
  return <img src={ELEMENTS[element]} alt={getElementName(element)} />;
};

const元素={
清单\u small，//与清单\u small相同：清单\u small
上市公司(中)，
大型上市公司
}
常量元素预览=（{element}）=>{
返回；
};

基本上，您是以字符串的形式接收

元素。因此，当它被传递到
img
元素的
src
属性时，它将类似于
src={“listing_small”}
或
src={“listing_medium”}
等，这不是有效的图像源路径。这就是图像元素未正确渲染的原因

下面是实现这一目标的方法之一

import React from "react";
import listing_small from "assets/elements/listing_small.svg";
import listing_medium from "assets/elements/listing_medium.svg";
import listing_large from "assets/elements/listing_large.svg";
import { getElementName } from "utils/enums";

const ElementPreview = ({ element }) => {
  let src = listing_small;
  if(element === "listing_medium") {
     src = listing_medium;
  } else if(element === "listing_large") {
     src = listing_large;
  }
  return <img src={src} alt={getElementName(element)} />;
};

export default ElementPreview;

从“React”导入React；
从“assets/elements/listing_small.svg”导入清单_small；
从“assets/elements/listing_media.svg”导入列表_media；
从“assets/elements/listing_large.svg”导入清单_large；
从“utils/enums”导入{getElementName}；
常量元素预览=（{element}）=>{
设src=listing_small；
如果（元素==“列表中”）{
src=中位；
}else if（元素==“列表大小”）{
src=清单(大);；
}
返回；
};
导出默认元素预览；

下面是另一种方式

import React from "react";
import { getElementName } from "utils/enums";

const ElementPreview = ({ element }) => {
  return <img src={require(`assets/elements/${element}.svg`)} alt={getElementName(element)} />;
};

export default ElementPreview;

从“React”导入React；
从“utils/enums”导入{getElementName}；
常量元素预览=（{element}）=>{
返回；
};
导出默认元素预览；
谢谢！看起来不错。谢谢你，尼思。我采用了阿古斯丁的方法，因为时间稍微短了一点。但是你的第二个解决方案看起来很相似。