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

可能的方法:

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

这样地:

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

那么你就不需要开关了。 注意

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

嗨,你可以这样做,

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