在 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 loop和if statement但我更喜欢这种方式

Answer 2

据我了解，您想从this.props.param渲染一堆图像，这些图像可以是多字符字符串？

如果是这种情况，如果您将import语句替换为require，则可以格式化并使您的生活更轻松，从而使您的生活变得更加简单。

const characterImages = {
a: require('./a.jpg'),
b: require('./b.jpg'),
c: require('./c.jpg')
}

从那里...您只需split('')this.props.param并映射它render：

class Title extends Component {
render() {
// other code here, this.props.param = some string
// (this.props.param || '') resolves error if param not set
// .toString() resolves error and converts to string if param is just a number
{ (this.props.param || '').toString().split('').map((letter, i) => 
<img key={i} src={characterImages[letter]}></img>
)}
// other code here
}
}