Next.js 点击时渲染一个新的 div。

huangapple
go评论96阅读模式
英文:

Nextjs render a new div onClick

问题

以下是您提供的内容的中文翻译：

  1. 单击时渲染 div
  1. function zoom_img(event) {
  2.     console.log(event.target);
  3.     console.log(event.target['data-loaded-src'])
  4.     const src = event.target['data-loaded-src']
  5.     
  6.     return (
  7.       <div className='w-screen h-screen fixed flex justify-center items-center'>
  8.         <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
  9.           <Image src={src} fill={true} />
  10.         </div>
  11.       </div>
  12.     )
  13.   }
  15. ...
  17. <Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img}/>
  1. 自定义组件
  1. function Glasses ({src, height, width, alt}) {
  2.     function enlrg() {
  3.       console.log(src);
  4.       return (
  5.         <div className='w-screen h-screen fixed flex justify-center items-center'>
  6.           <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
  7.             <Image src={src} fill={true} />
  8.           </div>
  9.         </div>
  10.       )
  11.     }
  12.     return (
  13.       <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
  14.     )
  15.   }
  18. ...
  20. <Glasses src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />
  1. 单击现有的 div 以移除隐藏类
  1. function Glasses2 ({src, height, width, alt}) {
  2.     function enlrg() {
  3.       console.log(src);
  4.       let x = document.getElementById('temp');
  5.       x.classList.remove('hidden');
  6.       x.classList.add('flex');
  7.     }
  8.     return (
  9.       <Image src={src} width={width} height={height} alt={alt} onClick={enlrg} />
  10.     )
  11.   }
  14. ...
  16. <Glasses2 src={'/gafas.png'} width={150} height={150} alt='Gafas 1' />
  17. <div id='temp' className='w-screen h-screen fixed hidden justify-center items-center'>
  18.   <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
  19.     <Image src={'/gafas.png'} fill={true} />
  20.   </div>
  21. </div>
  1. 这个方法确实可行，但我失去了 Next.js 图像优化
  1. function zoom_img (event) {
  2.     console.log(event.target);
  3.     console.log(event.target['data-loaded-src'])
  4.     const src = event.target['data-loaded-src']
  5.     const new_cont = document.createElement('div');
  6.     const new_div = document.createElement('div');
  7.     const main = document.getElementById('main');
  8.     new_cont.classList.add('w-screen', 'h-screen', 'fixed', 'flex', 'justify-center', 'items-center');
  9.     new_div.classList.add('w-9/12', 'h-5/6', 'bg-slate-200', 'opacity-50');
  10.     // 在这里添加 img 标签
  11.     new_cont.appendChild(new_div);
  12.     main.appendChild(new_cont);
  13.   }
  16. ...
  18. <Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={zoom_img} />

在每种方法中，您都可以在控制台中看到日志，但只有第四种方法中会看到新的 div。是否第四种方法是唯一正确的方式？如果可能的话，我更喜欢使用 Image 组件。您认为哪种方法更好？

英文:

I have an image and I want to create a new div (on click) with a larger version of the same image.

I've tried four approaches:

  1. Render div on Click
  1. function zoom_img (event) {
  2.     console.log(event.target);
  3.     console.log(event.target[&#39;data-loaded-src&#39;])
  4.     const src = event.target[&#39;data-loaded-src&#39;]
  5.     
  6.     return (
  7.       &lt;div className=&#39;w-screen h-screen fixed flex justify-center items-center&#39;&gt;
  8.         &lt;div className=&#39;w-9/12 h-5/6 bg-slate-200 opacity-50&#39;&gt;
  9.           &lt;Image src={src} fill={true} /&gt;
  10.         &lt;/div&gt;
  11.       &lt;/div&gt;
  12.     )
  13.   }
  15. ...
  17. &lt;Image src={&#39;/gafas.png&#39;} width={150} height={150} alt=&#39;Gafas 1&#39; onClick={zoom_img}/&gt;
  1. Custom component
  1. function Glasses ({src, height, width, alt}) {
  2.     function enlrg() {
  3.       console.log(src);
  4.       return (
  5.         &lt;div className=&#39;w-screen h-screen fixed flex justify-center items-center&#39;&gt;
  6.           &lt;div className=&#39;w-9/12 h-5/6 bg-slate-200 opacity-50&#39;&gt;
  7.             &lt;Image src={src} fill={true} /&gt;
  8.           &lt;/div&gt;
  9.         &lt;/div&gt;
  10.       )
  11.     }
  12.     return (
  13.       &lt;Image src={src} width={width} height={height} alt={alt} onClick={enlrg} /&gt;
  14.     )
  15.   }
  18. ...
  20. &lt;Glasses src={&#39;/gafas.png&#39;} width={150} height={150} alt=&#39;Gafas 1&#39; /&gt;
  1. Existing div onClick remove hidden class
  1. function Glasses2 ({src, height, width, alt}) {
  2.     function enlrg() {
  3.       console.log(src);
  4.       let x = document.getElementById(&#39;temp&#39;);
  5.       x.classList.remove(&#39;hidden&#39;);
  6.       x.classList.add(&#39;flex&#39;);
  7.     }
  8.     return (
  9.       &lt;Image src={src} width={width} height={height} alt={alt} onClick={enlrg} /&gt;
  10.     )
  11.   }
  14. ...
  16. &lt;Glasses2 src={&#39;/gafas.png&#39;} width={150} height={150} alt=&#39;Gafas 1&#39; /&gt;
  17. &lt;div id=&#39;temp&#39; className=&#39;w-screen h-screen fixed hidden justify-center items-center&#39;&gt;
  18.   &lt;div className=&#39;w-9/12 h-5/6 bg-slate-200 opacity-50&#39;&gt;
  19.     &lt;Image src={&#39;/gafas.png&#39;} fill={true} /&gt;
  20.   &lt;/div&gt;
  21. &lt;/div&gt;
  1. This one DID work but I'm loosing nextjs image optimization
  1. function zoom_img (event) {
  2.     console.log(event.target);
  3.     console.log(event.target[&#39;data-loaded-src&#39;])
  4.     const src = event.target[&#39;data-loaded-src&#39;]
  5.     const new_cont = document.createElement(&#39;div&#39;);
  6.     const new_div = document.createElement(&#39;div&#39;);
  7.     const main = document.getElementById(&#39;main&#39;);
  8.     new_cont.classList.add(&#39;w-screen&#39;, &#39;h-screen&#39;, &#39;fixed&#39;, &#39;flex&#39;, &#39;justify-center&#39;, &#39;items-center&#39;);
  9.     new_div.classList.add(&#39;w-9/12&#39;, &#39;h-5/6&#39;, &#39;bg-slate-200&#39;, &#39;opacity-50&#39;);
  10.     // add img tag here
  11.     new_cont.appendChild(new_div);
  12.     main.appendChild(new_cont);
  13.   }
  16. ...
  18. &lt;Image src={&#39;/gafas.png&#39;} width={150} height={150} alt=&#39;Gafas 1&#39; onClick={zoom_img} /&gt;

In every approach I DO get to see the log in the console but only in approach 4 I see the new div.

Is approach 4 the only correct way? I would prefer to use the Image component if possible. What do you guys think?

答案1

得分: 1

你可以尝试类似这样的方式：

设置钩子：

  1. [zoomImage, setZoomImage] = useState(false)
  1. <Image src={'/gafas.png'} width={150} height={150} alt={'Gafas 1'} onClick={() => setZoomImage(true)}/>

// 放大后的图片

  1. <div className={`${zoomImage ? 'block' : 'hidden'} w-screen h-screen fixed flex justify-center items-center`}>
  2. <div className='w-9/12 h-5/6 bg-slate-200 opacity-50'>
  3.    <Image src={src} fill={true} />
  4. </div>
  5. </div>
英文:

You can try something like this:

Set the hook:

  1. [zoomImage, setZoomImage] = useState(false)
  1. &lt;Image src={&#39;/gafas.png&#39;} width={150} height={150} alt=&#39;Gafas 1&#39; onClick={() =&gt; setZoomImage(true)}/&gt;
  3. // zoomed image
  4. &lt;div className={`${zoomImage ? &#39;block&#39; : &#39;hidden&#39;} w-screen h-screen fixed flex justify-center items-center`}&gt;
  5. &lt;div className=&#39;w-9/12 h-5/6 bg-slate-200 opacity-50&#39;&gt;
  6.    &lt;Image src={src} fill={true} /&gt;
  7. &lt;/div&gt;
  8. &lt;/div&gt;

In this code you are actually telling Next.JS that whenever user clicks that image, change variable zoomImage to true and as a result that bigger image that is hidden by default, will have display block. (I supposed you're using tailwindcss)

答案2

得分: 0

谢谢 @Atena Dadkhah。你的答案完美地解决了问题。

在项目中，我不只有一个图像，而是有一堆图像，所以最终的代码看起来像这样：

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

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

  1. <Image src={'/gafas.png'} width={150} height={150} alt='Gafas 1' onClick={enlarge} className='cursor-zoom-in' />

接着是隐藏的 div：

  1. <div className={`${lrg ? 'flex' : 'hidden'} w-screen h-screen fixed justify-center items-center`}>
  2.   <div className='w-9/12 h-5/6 bg-slate-200 flex justify-center items-center relative'>
  3.     <Image id='largerImage' fill={true} />
  4.   </div>
  5. </div>

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

再次感谢 Next.js 点击时渲染一个新的 div。

英文:

Thank you very much @Atena Dadkhah. Your answer worked perfectly.

In the project a have not one but a bunch of images so the final code looked like this:

  1. function enlarge(e) {
  2.     setLrg(true);
  3.     let img = document.getElementById(&#39;largerImage&#39;),
  4.         src = e.target[&#39;data-loaded-src&#39;];
  5.     img[&#39;src&#39;] = src;
  6.   }

Then a bunch of images like this:

  1. &lt;Image src={&#39;/gafas.png&#39;} width={150} height={150} alt=&#39;Gafas 1&#39; onClick={enlarge} className=&#39;cursor-zoom-in&#39; /&gt;

Then the hidden div:

  1. &lt;div className={`${lrg ? &#39;flex&#39; : &#39;hidden&#39;} w-screen h-screen fixed justify-center items-center`}&gt;
  2.   &lt;div className=&#39;w-9/12 h-5/6 bg-slate-200 flex justify-center items-center relative&#39;&gt;
  3.     &lt;Image id=&#39;largerImage&#39; fill={true} /&gt;
  4.   &lt;/div&gt;
  5. &lt;/div&gt;

It's still missing the behaviour for closing the div but that should be easy to add.

Once again. Thank you Next.js 点击时渲染一个新的 div。

huangapple
  • 本文由 发表于 2023年5月8日 02:03:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76195505.html
  • javascript
  • next.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定