如何在 React 中将字符串和变量连接到另一个变量的名称中？答案

【问题标题】：How can I concatenate a string and variable into the name of another variable in React?如何在 React 中将字符串和变量连接到另一个变量的名称中？
【发布时间】：2021-12-24 05:44:01
【问题描述】：

我正在导入图像并将它们命名为img1、img2、img3 等。我希望能够在单击按钮时增加名称上的数字，但是当我连接或使用模板文字时返回一个字符串。

这里为了清楚起见：

import img1 from 'img1.jpg'
import img2 from 'img2.jpg'
import img3 from 'img3.jpg'

const [ num, setNum ] = useState(1)

function handleNextClick() {
    setNum(num + 1)
}

这是我的问题所在：

<img src={ 'img' + num} alt="" />

它返回为：

<img src='img1' alt="" />

我想要：

<img src={img1} alt="" />

【问题讨论】：

标签： reactjs variables concatenation src template-literals

【解决方案1】：

你好，在 javascript 中，你可以通过简单地解构你的值来做到这一点。并且您始终可以通过它们的索引数组索引来访问它们，索引通常从 0 开始

const x = [1, 2, 3, 4, 5];

所以如果你想得到你做的第一个值

x[0];

查看 MDN Web Docs 中的此页面以了解解构分配 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

这在数组上 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

【讨论】：

【解决方案2】：

您应该将图像存储在参考数组中，然后从那里提取：

import img1 from 'img1.jpg'
import img2 from 'img2.jpg'
import img3 from 'img3.jpg'

const images = [img1, img2, img3]

那么就可以通过索引来引用：

<img src={images[num - 1]} alt="" />

注意 num 的 - 1 以便使用零索引数组。

【讨论】：

这工作得很好......
酷 :) 随时接受答案。