在 React 中每个会话显示一次模态

Question

我想在每个用户会话中显示一个弹出模式，我想知道如何在我的 React 应用程序中合并 jquery cookie，以便网站知道用户何时返回并且在用户的 cookie 数据之前不会再次显示模式已被清除。这是我的代码：

import React from "react";
import styled from "styled-components";

const Modal = ({ showModal, setShowModal }) => {
  return (
    <>
      {showModal ? (
        <Wrap>
          <TopWrap>
            <h1>IMPORTANT</h1>
            <Close onClick={() => setShowModal(false)}>Close</Close>
          </TopWrap>
          <h3 style={{ fontWeight: "200" }}>
            text here
          </h3>
        </Wrap>
      ) : null}
    </>
  );
};

const Wrap = styled.div`
  position: fixed;
  background: white;
  width: 350px;
  padding: 20px;
  bottom: 2%;
  right: 2%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
`;

const TopWrap = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
`;

const Close = styled.h4`
  color: #aaa;
  cursor: pointer;
  margin-bottom: 20px;

  &:hover {
    color: black;
  }
`;
export default Modal;

我正在使用 React 钩子，因此当用户按下“关闭”文本时，它会关闭模式。我要解决的问题是每次刷新页面时都会出现模式，并且我希望每个会话只显示一次。我知道可以使用 JQuery 在 HTML 中执行此操作，但我不确定如何在 React 中实现。

Answer 1

您可以发送一个在用户关闭浏览器会话后过期的 cookie。

document.cookie = "showedModal=showedModal; path=/";

在您的代码中，您只需检查 cookie 是否存在。如果是，则显示模态，如果不是，则不显示。

Answer 2

不，兄弟，您不需要 jquery、cookie 或其他任何东西。你只需要 sessionStorage，sessionStorage 和 localStorage 是一样的，但有一点不同，你存储的内容会在你关闭水龙头时被删除。

首先

当你加载应用时检查你的 sessionStorage

const openend = typeof sessionStorage.getItem(“opened”) === “string”

如果答案是否定的，则打开模态 如果答案是肯定的则不要打开

如果 (openend===false) {

//打开模态

}

第二

当你的模态关闭时设置openend

sessionStorage.setItem(“打开”,”1”);

Answer 3

const useSessionModal = ()=> {
    const session = useSession();
    const [showModal, setShowModal] = useState(false);
    const hideModal = ()=>{
        const modalKey = "modalSession";
        localStorage.setItem(modalKey, session);
        setShowModal(false);
    }
    useEffect(()=> {
        const modalKey = "modalSession";
        const modalSession = localStorage.getItem(modalKey);
        setShowModal(modalSession!==session);
    });
    return [showModal, hideModal];
}

const Modal = () => {
    const [showModal, hideModal] = useSessionModal();
  return (
    <>
      {showModal ? (
        <Wrap>
          <TopWrap>
            <h1>IMPORTANT</h1>
            <Close onClick={hideModal}>Close</Close>
          </TopWrap>
          <h3 style={{ fontWeight: "200" }}>
            text here
          </h3>
        </Wrap>
      ) : null}
    </>
  );
};

在localStorage中保存会话相关标签；