我如何解决 preview.className.remove is not a function in 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");

将为您提供 HTML 节点的列表，这些节点在 UI 上可用该选择器。您正在从该列表项访问 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>

Here您可以找到更多示例。

我如何解决 preview.className.remove is not a function in React？

how do I solve preview.className.remove is not a function in React?

image-gallery

reactjs