Nextjs 在单击时渲染一个新的 div-PHP中文网问答

我有一个图像，我想使用同一图像的较大版本创建一个新的 div（点击时）。

我尝试了四种方法：

点击时渲染 div

function zoom_img (event) {
    console.log(event.target);
    console.log(event.target['data-loaded-src'])
    const src = event.target['data-loaded-src']
    
    return (
      
        
          
        
      
    )
  }

...

自定义组件

function Glasses ({src, height, width, alt}) {
    function enlrg() {
      console.log(src);
      return (
        
          
            
          
        
      )
    }
    return (
      
    )
  }


...

现有 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 (
      
    )
  }


...

这个确实有效，但我失去了 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);
  }


...

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

方法 4 是唯一正确的方法吗？如果可能的话，我更愿意使用图像组件。大家觉得怎么样？

全部回复(2)

P粉2935505752024-03-30 13:50:38 2楼

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

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

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

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

然后是隐藏的div：

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

再一次。谢谢:)

赞 +0

添加回复

P粉5981402942024-03-30 12:34:55 1楼

你可以尝试这样的事情：

设置挂钩：

[zoomImage, setZoomImage] = useState(false)

 setZoomImage(true)}/>

// zoomed image

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