JS: Как динамически получать имена переменных

Question

Я использую шаблон создания-реакции-приложения.

В одном из моих компонентов я импортирую путь к нескольким изображениям следующим образом.

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

Если все ваши имена файлов соответствуют этому стандарту, вы можете просто использовать конкатенацию строк.

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

или даже чище с интерполяцией строк ..

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

Edit: При использовании веб-пакета вы должны использовать require, а при использовании require конкатенация строк не работает, однако интерполяция строк по-прежнему работает. Так ..

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

См. этот ответ для получения дополнительной информации.

Answer 2

У вас есть несколько доступных вариантов:

Сначала используйте объект в соответствии с предложением @ 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} />;
}