如何设置图片弹窗？React首页自动弹窗实现需求问询

你的代码 #

<div className="Image popup">
  <Modal
    isOpen={modalIsOpen}
    onRequestClose={closeModal}
    contentLabel="Image popup"
  >
    <img src="../img/navratri-1.png" alt="Image popup" />
    <button onClick={closeModal}>Close</button>
  </Modal>
</div>;

useEffect(() => {
  const hasShownImagePopup = localStorage.getItem("hasShownImagePopup");
  if (!hasShownImagePopup) {
    localStorage.setItem("hasShownImagePopup", "true");
    setModalIsOpen(true);
  }
}, []);

const closeModal = () => {
  setModalIsOpen(false);
};

功能匹配性分析 #

这段代码的核心逻辑可以实现你的需求：

• 首次进入页面时，空依赖的useEffect只会执行一次，它读取localStorage中的标记，若标记不存在则设置标记并打开弹窗，满足「进入首页自动显示弹窗」的要求
• 点击关闭按钮会触发closeModal方法，通过setModalIsOpen(false)关闭弹窗，符合「点击关闭弹窗」的需求

补充必要代码 #

你提供的代码缺少modalIsOpen状态的定义，需要补充以下代码才能正常运行：

const [modalIsOpen, setModalIsOpen] = useState(false);

同时要确保你使用的Modal组件（比如常用的react-modal）已正确安装并导入，另外图片路径../img/navratri-1.png需要根据项目实际文件结构调整，避免图片加载失败。

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