Nextjs 在點擊時渲染一個新的 div

Question

我有一個圖像，我想使用同一圖像的較大版本建立一個新的 div（點擊時）。

我嘗試了四種方法：

1. 點擊時渲染 div

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. 自訂元件

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. 現有 div onClick 刪除隱藏類別

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. 這個確實有效，但我失去了 nextjs 圖像優化

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

在每種方法中我都能看到控制台中的日誌，但只有在方法 4 中我才能看到新的 div。

方法 4 是唯一正確的方法嗎？如果可能的話，我更願意使用圖像組件。大家覺得怎麼樣？

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）