Question

目前我使用以下代码使用web-packe动态导入某个模块。

我想知道是否有办法避免切换。感谢

import React from 'react'
import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

const loadIcon = (src) => {
  switch (src) {
    case 'iconSend':
      return iconSend
    case 'iconReload':
      return iconReload
    case 'iconDownload':
      return iconDownload
    case 'iconAddDoc':
      return iconAddDoc
    case 'iconAddAgendaItem':
      return iconAddAgendaItem
  }
}

const Option = ({id, name, isActive, src}) => {
  return (
    <div>
      <div>
        <img src={loadIcon(src)} alt={name} />
      </div>
    </div>
  )
}

export default Option

Answer 1

我会使用地图。像这样的东西：那你就不需要开关了。注意这是反应和打字稿。如果您使用简单的反应jsx而不是tsx，则不需要类型的源

type Source = 'iconSend'| 'iconReload' | 'iconDownload' | 'iconAddDoc' | 'iconAddAgendaItem';
const icons: Map<Source, string> = new Map<Source, string>();

icons.set('iconSend', iconSend);
icons.set('iconReload', iconReload);
icons.set('iconDownload', iconDownload);
icons.set('iconAddDoc', iconAddDoc);
icons.set('iconAddAgendaItem', iconAddAgendaItem);

const loadIcon = (src) => {
  return icons.get(src);
};

希望有所帮助！

Answer 2

可能的方法：

1-使用 require 并在src中传递图片的确切名称，如下所示：

<img src={require(`./${src}`)} alt={name} />

src应该是：

icon-send.png
icon-reload.png
icon-download.png
icon-add-doc.png
icon-add-agenda-item.png

2-准备一个带有键名和图像的对象，用它来直接获取图像。

像这样：

import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

let hash = {
    iconSend,
    iconReload,
    iconDownload,
    iconAddDoc,
    iconAddAgendaItem
}

<img src={ hash[src] } alt={name} />

Answer 3

嗨，你可以这样做，

import React from 'react'
import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

const loadIcon = (src) => {
   let myDictionary = {
      iconSend: iconSend,
      iconDownload: iconDownload,
      iconAddDoc: iconAddDoc
   };
   return myDictionary[src];
}

const Option = ({id, name, isActive, src}) => {
  return (
    <div>
      <img src={loadIcon(src)} alt={name} />
    </div>
  )
}

export default Option

您甚至可以将loadIcon作为单独的文件，并在您需要的任何地方的所有应用中使用它。

是否可以从字符串动态加载模块

3 个答案: