如何设置弹出图像

Answer 1

if (!hasShownImagePopup) {

这里，

!hasShownImagePopup

仅在

true

为“”时返回

hasShownImagePopup

。

因为在本地存储中，数据是以字符串格式存储的。

所以，我们应该检查

hasShownImagePopup

是否不是

"true"

。

if (hasShownImagePopup !== "true") {

此外，当您关闭模态框时，您应该将 LocalStorage 中的

hasShownImagePopup

设置为

"false"

。当您再次访问该页面时，这将使弹出窗口再次显示。

const closeModal = () => {
  localStorage.setItem("hasShownImagePopup", "false");
  setModalIsOpen(false);
};

这是一个 CodePen 示例。

Answer 2

你可以尝试下面的代码片段吗

import React, { useState, useEffect } from 'react';
import Modal from 'react-modal';

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

  useEffect(() => {
    const hasShownImagePopup = localStorage.getItem('hasShownImagePopup');

    if (!hasShownImagePopup) {
      localStorage.setItem('hasShownImagePopup', 'true');
      setModalIsOpen(true);
    }
  }, []);

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

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

export default ImagePopup;