Nextjs rendern beim Klicken ein neues Div

Question

Ich habe ein Bild und möchte (per Klick) ein neues Div mit einer größeren Version desselben Bildes erstellen.

Ich habe vier Methoden ausprobiert:

1. Div beim Klicken rendern

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    
    return (
      <div className='w-screen h-screen fixed flex justify-center items-center'>
        <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
          <Image src={src} fill={true} />
        </div>
      </div>
    )
  }

...

<Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img}/>

2. Kundenspezifische Komponenten

function Glasses ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      return (
        <div className='w-screen h-screen fixed flex justify-center items-center'>
          <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
            <Image src={src} fill={true} />
          </div>
        </div>
      )
    }
    return (
      <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
    )
  }


...

<Glasses src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />

3. Vorhandenes Div anKlicken Sie auf „Versteckte Klasse löschen“

function Glasses2 ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      let x = document.getElementById('temp');
      x.classList.remove('hidden');
      x.classList.add('flex');
    }
    return (
      <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
    )
  }


...

<Glasses2 src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />
<div id='temp' className='w-screen h-screen fixed hidden justify-center items-center'>
  <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
    <Image src={'/gafas.png'} fill={true} />
  </div>
</div>

4. Das funktioniert zwar, aber ich habe die Bildoptimierung von nextjs verloren

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    const new_cont = document.createElement('div');
    const new_div = document.createElement('div');
    const main = document.getElementById('main');
    new_cont.classList.add('w-screen', 'h-screen', 'fixed', 'flex', 'justify-center', 'items-center');
    new_div.classList.add('w-9/12', 'h-5/6', 'bg-slate-200', 'opacity-50');
    // add img tag here
    new_cont.appendChild(new_div);
    main.appendChild(new_cont);
  }


...

<Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img} />

Bei jeder Methode kann ich die Protokolle in der Konsole sehen, aber nur bei Methode 4 kann ich das neue Div sehen.

Ist Methode 4 der einzig richtige Weg? Ich würde wenn möglich lieber eine Bildkomponente verwenden. Was denken Sie?

Answer 1

非常感谢@Atena Dadkhah。您的回答非常有效。

在项目中，不是一个而是一堆图像，因此最终代码如下所示：

function enlarge(e) {
    setLrg(true);
    let img = document.getElementById('largerImage'),
        src = e.target['data-loaded-src'];
    img['src'] = src;
  }

然后是一堆像这样的图像：

然后是隐藏的div：

它仍然缺少关闭 div 的行为，但这应该很容易添加。

再一次。谢谢:)

Answer 2

你可以尝试这样的事情：

设置挂钩：

[zoomImage, setZoomImage] = useState(false)

 setZoomImage(true)}/>

// zoomed image


   

在此代码中，您实际上是在告诉 Next.JS，每当用户单击该图像时，将变量 zoomImage 更改为 true，因此默认情况下隐藏的较大图像将具有显示块。 （我猜你正在使用 tailwindcss）