时间戳

首页 > 解决方案 > 仅基于字符串选择组件而无需在 ReactJS 中切换

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

问题描述

这基本上是我想要做的：

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') {
....

我的方法可以通过一些调整来实现吗？还是我将不得不求助于基本上一系列的条件语句？

标签： javascriptreactjs

解决方案

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

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 您也可以使用 a和 an但我更喜欢这种方式if
for loopif statement

推荐阅读