我在將 html 和 js 檔案轉換為反應組件（圖片庫）時遇到問題。下面是組件，圖片取自 shop.js 檔案。當我嘗試查看頁面時，它說在函式之外回傳。下面是圖片庫組件
import React, { useState } from 'react';
export default function Imagegallery(product) {
const prod=product
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".image-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace("small", "big");
previews.forEach(preview => preview.className.remove("image-active"));
highlight.src = bigSrc;
preview.className.add("image-active");
});
});
}
return (
<>
<div className="image-gallery">
<img className="gallery-highlight" img src={prod.product.image} alt=.
{prod.product.name}
/>
<div className="image-preview">
<img src={prod.product.image2} className="image-active" />
<img src={prod.product.image3} />
<br />
</div>
</div>
</>
);
}
uj5u.com熱心網友回復：
highlight.src = bigSrc;
preview.className.add("image-active");
});
});
} ///remove this curly bracket
``
uj5u.com熱心網友回復：
您在關閉 preview.forEach 括號時添加了一個額外的花括號。
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/467686.html