我如何解决preview.className.remove不是React中的函数?

Question

我在react中创建了一个图片库，但是当你尝试点击不同的图像时，它不会切换到大图。当我console.log图像预览时，它出现为preview. classname .remove不是一个函数。有人能帮忙吗?提前谢谢你

import React, { useState } from 'react';
export default function ImageGallery(prod) {

console.log("image-preview")
const product=prod

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" src={product.prod.image} alt={product.prod.name} 
/>
<div className="image-preview">
<img src={product.prod.image2} alt={product.prod.name}className="image-active" />
<img src={product.prod.image3} alt={product.prod.name}/>
<br />
</div>

);
}

Answer 1

const previews = document.querySelectorAll (".image-preview img");

将为您提供该选择器在UI上可用的HTML节点列表。你从那个列表项访问className，你会得到一个string值。

不能对string值执行remove

。你可以尝试用classList代替className。您的代码将被修改如下:

previews.forEach(preview => preview.classList.remove("image-active"));

Answer 2

似乎你正在尝试添加动态css类，我建议你这样做的基础上的状态或道具，如:

const [active, setActive] = useState(false);
<div className={active? "active" : ""}></div>

这里你可以找到更多的例子。