javascript - ReactJS中仅基于字符串选择组件，无需切换

Question

这基本上就是我想做的事情:

import image_a from './a.jpg';
import image_b from './b.jpg';
import image_c from './c.jpg';

class Title extends Component {
  render() {
    // other code here, this.props.param = some string

    var letters = [];
    for (var i = 0; i < this.props.param.length; i++) {
      var componentName = "image_" + this.props.param[i];
      letters.push(<img src={componentName}></img>); // DOESNT WORK
    }

    // other code here
  }
}

我有一堆图像，我想从字符串参数动态渲染它们。我可以做一系列

if (this.props.text[i] === 'a') {
    letters.push(<img src={image_a}></img>);
}
if (this.props.text[i] === 'b') {
....

我的方法可以通过一些调整来实现吗？或者我是否必须基本上求助于一系列条件语句？

Answer 1

创建一个包含所有图像的对象的文件:

export const images = {img1: require('./img1.jpg')}

那么你可以这样做

import images from './images';

class Title extends Component {

render () {

  this.props.params.map((value,index)=> !images[value]
    ? null
    : <img src={images[value]} key={index} />
  ));
  }
}

请注意，我假设 value 是一个字符串，并且在条件渲染时应返回 null(使用 if)
您还可以使用 for 循环 和 if 语句 但我更喜欢这种方式