我將影像匯入和命名他們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="" />
uj5u.com熱心網友回復：
您應該將影像存盤在參考陣列中，然后從那里提取：
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="" />
注意 - 1 到 num 以使用零索引陣列。
uj5u.com熱心網友回復：
你好，在 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358063.html
下一篇：迭代多個變數