在周围添加按钮后，React Site 不会立即呈现 <img/>

Question

我正在尝试制作一个动态且美观的图片库，但我遇到了问题。因为我希望图像可以点击（这样我可以展开它们），所以我需要在图像周围环绕一个按钮。由于某种原因，这是崩溃的反应。我尝试了大约 5 种不同的方式来实现按钮。可悲的是没有工作

我的代码目前看起来像这样：

import { useState, useEffect } from 'react';
import "./styles/gallery.css"
import Masonry, {ResponsiveMasonry} from 'react-responsive-masonry';
function Gallery() {
  const [pictures, setPictures] = useState([]);
  const [popup, togglepopup] = useState(false);

  useEffect(() => {
    const importPictures = async () => {
      const context = require.context('../pictures/gallery', false, /\.(png|jpe?g|svg)$/);
      const files = context.keys();
      const pictures = await Promise.all(files.map(async (file) => {
        const image = await import(`../pictures/gallery/${file.slice(2)}`);
        return {
          src: image.default,
          alt: file.slice(2, -4),
        };
      }));
      setPictures(pictures);
    };
    importPictures();
  }, []);

  return (
    <div className="galleryElements">
    <ResponsiveMasonry columnsCountBreakPoints={{300: 1, 750: 2, 900: 3, 1400: 4, 1900: 5, 2100: 6}}>
      <Masonry gutter='1rem'>
      
      {pictures.map((picture) => (
        <button className='elementButton' type="button" onClick={togglepopup(!popup)}>
        <img className="element" src={picture.src} alt={picture.alt} key={picture.alt} />
        </button>
      ))}
      
      </Masonry>
    </ResponsiveMasonry>
    
    </div>
    
  );
}

export default Gallery;

如果我删除按钮，一切正常并正确呈现。如果它在那里，则只渲染背景颜色。没有其他的。没有导航栏，没有页脚等。 如果您知道任何其他使弹出功能成为可能的方法，我将很高兴听到它。

Answer 1

你可以在你的

onClick

中使用

<img/>

你真的不需要

<button>

来做到这一点：

<img 
 className="element"
 src={picture.src} 
 alt={picture.alt} 
 key={picture.alt}
 onClick={() => {
   togglepopup(!popup)
 }}
 />