Question

element将为“ listing_small”，“ listing_medium”或“ listing_large”。现在我的目标是例如element是listing_small我的组件将呈现导入的SVG listing_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;

Answer 1

您可以创建一个对象，该对象包含svg src作为值和listing_*作为键。

让它像这样：

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

Answer 2

基本上，您会收到element作为字符串。因此，当将其传递到src元素的img属性时，它将类似于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;

下面是另一种方式

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;

根据传递的属性“元素”渲染SVG

2 个答案: