React中GLightbox图片画廊无法切换，如何添加导航箭头？

你遇到的无法切换图片的问题，核心是GLightbox未将所有图片识别为同一画廊组，再加上代码存在React语法错误、GLightbox未正确初始化的问题。以下是具体修复方案：

1. 修复React语法错误 #

React中DOM元素的类名属性需用className替代原生HTML的class，先把代码里所有class替换为className。

2. 统一画廊链接的类名与分组 #

给所有图片的<a>标签添加统一类名（修正你之前拼写错误的galelry-lightbox为gallery-lightbox），并通过data-gallery属性将它们归为同一组，让GLightbox识别这是一个可切换的图片集合。

3. 正确初始化GLightbox #

使用useEffect在组件挂载完成后初始化GLightbox，确保DOM元素已渲染完毕，GLightbox能找到目标元素。

修正后的完整代码 #

import React, { useEffect } from 'react';
import img1 from './assets/img/gallery/gallery-1.jpg';
import img2 from './assets/img/gallery/gallery-2.jpg';
import img3 from './assets/img/gallery/gallery-3.jpg';
import img4 from './assets/img/gallery/gallery-4.jpg';
import img5 from './assets/img/gallery/gallery-5.jpg';
import img6 from './assets/img/gallery/gallery-6.jpg';
import img7 from './assets/img/gallery/gallery-7.jpg';
import img8 from './assets/img/gallery/gallery-8.jpg';
import GLightbox from 'glightbox';

export default function Gallery() { // 修正组件名，符合语义化规范
  useEffect(() => {
    // 初始化GLightbox，指定目标类名
    const lightbox = GLightbox({
      selector: '.gallery-lightbox',
      navigation: true, // 默认已启用导航，可显式声明
      loop: true // 可选：开启循环切换
    });

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      lightbox.destroy();
    };
  }, []);

  return(
    <section id="galerie" className="gallery">
      <div className="container">
        <div className="section-title">
          <h2>Galerie</h2>
          <p>In această secțiune vă prezentăm câteva dintre produsele noastre. Pentru a vedea gama completă, va invităm să accesați pagina de Produse.</p>
        </div>
      </div>

      <div className="container-fluid">
        <div className="row g-0">
          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img1} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img1} alt="Produs 1" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img2} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img2} alt="Produs 2" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img3} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img3} alt="Produs 3" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img4} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img4} alt="Produs 4" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img5} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img5} alt="Produs 5" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img6} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img6} alt="Produs 6" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img7} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img7} alt="Produs 7" className="img-fluid"/>
              </a>
            </div>
          </div>

          <div className="col-lg-3 col-md-4">
            <div className="gallery-item">
              <a href={img8} className="gallery-lightbox" data-gallery="product-gallery">
                <img src={img8} alt="Produs 8" className="img-fluid"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

额外说明 #

• 移除了无用的handleClick函数，GLightbox会自动处理图片点击事件。
• 给图片添加了有意义的alt属性，提升页面可访问性。
• 若需自定义导航箭头样式，可通过CSS调整.glightbox-container .glightbox-prev和.glightbox-container .glightbox-next的样式。

内容的提问来源于stack exchange，提问作者Caragea Theodor