JS：如何动态抓取变量名

Question

我正在使用 create-react-app 模板。

在我的一个组件中，我正在导入多个图像的路径。

import iconAvatar from '../img/icon-avatar.png';
import iconHome from '../img/icon-home.png';
import iconVendor from '../img/icon-vendor.png';

现在假设我有一个这样的变量，它决定要使用的图像。

let imageType = "avatar"; // or "home", or "vendor", etc.

我想根据 imageType 的值动态渲染出正确的图像（无需使用复杂的 if-else 结构）

类似下面的东西（除了它不起作用）

<img src={"icon"}{imageType}/>

我该怎么做？

Answer 1

您有几个选项可用：

首先使用 @CertainPerformance 建议的对象

const images = {
  avatar: require('../img/icon-avatar.png'),
  home: require('../img/icon-home.png'),
  vendor: require('../img/icon-vendor.png')
}

<img src={images[imageType]} />

或者您可以使用 switch / if 语句

switch (imageType) {
  case 'home': return <img src={iconHome} />;
  case 'avatar': return <img src={iconAvatar} />;
  case 'vendor': return <img src={iconVendor} />;
}

Answer 2

如果您的所有文件名都遵循该标准，您可以只使用字符串连接。

<img src={'../img/icon-' + imageType + '.png'} />

甚至更干净 string interpolation..

<img src={`../img/icon-{$imageType}.png`} />

编辑： 使用 webpack 时必须使用 require 并且使用 require 时字符串连接不起作用，但是字符串插值仍然有效。所以..

<img src={require(`/img/icon-{$imageType}.png`)} />

有关详细信息，请参阅。

JS：如何动态抓取变量名

JS: How to dynamically grab variable names

javascript

import

create-react-app