Question

所以我希望我创建的图像组件根据我传入的道具显示不同的图像。有没有更好/更清晰的方法来做这个我只是做一个switch语句来查看应该使用哪个导入基于道具？

import image_1 from './image_1';
import image_2 from './image_2';

function Image(props) {
    let image;
    switch(props.imageName) {
        case('image 1'):
            image=image_1;
            break;
        case('image 2'):
            image=image_2;
            break;
    }

    return (
        <img src={image}>
        </img>
    );
}

export default Image;

Answer 1

您的代码是正确的，但有一些改进：
1）可以破坏参数中的道具
2）应始终在开关
中使用默认情况 3）如果你没有孩子，不应该使用img

const Image = ({imageName}) => {
    let image;

    switch(imageName) {
        case 'image 1' :
            image = image_1;
            break;
        default 'image 2':
            image = image_2;
    }

    return (
        <img src={image} />
    );
}

Answer 2

案例陈述有效，但很长时间内会变得难以处理。

您可以使用prop的值作为键来定义对象，并将图像作为这些键的值来定义。像这样（在ES6语法中）：

import image_1 from './image_1';
import image_2 from './image_2';

const images = { 
  foo: image_1,
  bar: image_2,
};

const Image = ({ name }) => ( # name is 'foo'
  <img src={images[name]} />
);

export default Image;

基于反应组件中的属性使用静态图像的最佳方法

2 个答案: