React中使用fancyapps-ui/fancybox实现放大图底部显示图片标题

• 绑定图片描述数据
  从CMS拿到图片数据后，渲染<img>时将描述存入自定义属性（比如data-description），同时保留title属性实现鼠标悬停预览：

  {images.map((img, idx) => (
    <img
      key={idx}
      src={img.src}
      alt={img.title}
      title={img.description}
      data-fancybox="article-gallery"
      data-description={img.description}
      style={{ width: '250px', margin: '0 10px', cursor: 'zoom-in' }}
    />
  ))}
  

• 配置Fancybox自定义Caption
  在React组件的useEffect中初始化Fancybox，通过caption配置项自定义底部显示的内容与样式：

  import Fancybox from '@fancyapps/ui';
  import '@fancyapps/ui/dist/fancybox.css';
  import { useEffect } from 'react';
  
  useEffect(() => {
    Fancybox.bind('[data-fancybox="article-gallery"]', {
      caption: (slide) => {
        // 从触发图片元素中获取预存的描述
        const desc = slide.trigger.getAttribute('data-description');
        // 返回带红色背景的描述容器
        return `<div style="background: red; color: #fff; padding: 12px; width: 100%;">${desc}</div>`;
      },
      // 确保caption显示在底部外部区域
      captionPosition: 'outside',
    });
  
    // 组件卸载时清理Fancybox实例
    return () => {
      Fancybox.destroy();
    };
  }, [images]); // 依赖图片数据，数据更新时重新绑定
  

• 原问题的常见排查点

  1. 未自定义caption逻辑：默认Fancybox仅读取元素的title或data-caption，无法直接修改样式，必须通过自定义函数返回HTML结构。
  2. 选择器绑定错误：确保所有目标图片的data-fancybox分组值一致，绑定选择器要精准匹配。
  3. 数据传递错误：如果描述存在组件的state/props中，要确保渲染时正确挂载到图片元素的自定义属性上。

内容的提问来源于stack exchange，提问作者Y U K I M U R A