React Image gallery 问题 - return 函数外

Question

我在将 html 和 js 文件转换为 React 组件（图片库）时遇到问题。下面是组件，图像取自 shop.js 文件。当我尝试查看页面时，它在函数外显示 return。下面是图库组件

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>
 </>
 );
 }

Answer 1

您在关闭 preview.forEach 括号时添加了一个额外的大括号。

});
});

Answer 2

 highlight.src = bigSrc;
  preview.className.add("image-active");
});
});
} ///remove this curly bracket 
``

React Image gallery 问题 - return 函数外

React Image gallery issues - return outside the function

components

image

gallery

reactjs