React中如何实现Gallery Modal与Semantic UI Modal联动关闭？

嘿，这个问题其实很好搞定，核心就是把两个组件的关闭状态关联起来就行。我给你一步步拆解：

1. 用状态控制Semantic Modal的显示/隐藏 #

首先，你需要用React的useState钩子来管理Semantic UI Modal的打开状态，这样我们能精准控制它的显示和隐藏：

import { useState } from 'react';
import { Modal } from 'semantic-ui-react';
import Gallery from 'react-grid-gallery';

function UserAlbum() {
  // 控制Semantic Modal的打开状态
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 打开Modal的方法（绑定到头像点击事件）
  const openAlbumModal = () => {
    setIsModalOpen(true);
  };

  // 统一的关闭Modal方法
  const closeAlbumModal = () => {
    setIsModalOpen(false);
  };

  // ...其他业务代码
}

2. 给React Grid Gallery绑定关闭回调 #

react-grid-gallery的Gallery组件自带onClose属性，不管是点击相册的关闭按钮、点击遮罩层，还是按ESC键关闭相册，这个回调都会被触发。我们只需要把关闭Semantic Modal的方法传给它，就能实现同步关闭：

// 在组件的JSX部分
<Modal open={isModalOpen} onClose={closeAlbumModal}>
  <Modal.Content>
    {/* 关键：给Gallery绑定onClose回调，同步关闭Semantic Modal */}
    <Gallery
      images={Images}
      onClose={closeAlbumModal}
      // 你的其他Gallery配置项（比如enableImageSelection、rowHeight等）
    />
  </Modal.Content>
</Modal>

// 头像点击触发打开Modal
<div onClick={openAlbumModal} className="user-avatar">
  {/* 你的头像组件 */}
</div>

3. 额外注意事项 #

• 如果你给Semantic Modal设置了closeOnDimmerClick={false}或者closeOnEscape={false}，记得要确保Gallery的对应关闭逻辑正常，或者根据需求调整配置——一般保持默认配置即可，这样不管是通过Gallery关闭，还是Semantic Modal自身的关闭方式，都能正常触发。
• 确认你的react-grid-gallery版本支持onClose属性（这个属性在较新版本中是默认提供的，如果是旧版本建议升级到最新稳定版）。

这样设置之后，当你关闭相册的模态框时，Semantic UI的Modal就会跟着一起关闭啦！

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