使用react道具作为导入引用

Question

我有这个组件，我正在向它传递一个字符串。假设它的值为"0"；谷歌"；。有没有办法用这个道具引用img src参数中的导入？

import google from "media/icons/icon-google.svg";
import facebook from "media/icons/icon-facebook.svg";
const SocialButton = (props: { mediaType: string }) => {
return (
<button className={'continue-with-button ' + props.mediaType }>
<span>
<img src='Use props to set path of google logo or facebook logo' />
</span>
<span>Continue with {props.mediaType.charAt(0).toUpperCase() + props.mediaType.substring(1)}</span>
</button>
);
};
export default SocialButton;

Answer 1

您可以使用三元条件运算符

import Google from "media/icons/icon-google.svg";
import Facebook from "media/icons/icon-facebook.svg";

<img src={ logo === 'google' ? Google : Facebook }/>

其中logo是道具的名称

交换机示例

const displayLogo = () => {
switch (logo) {
case 'google': return Google;
case 'facebook': return Facebook;
default: return ''

}
}
<img src={displayLogo()} />

我通常会将所有图像放在public文件夹中，然后在src中使用/image/filename.svg，而不是导入图像。