Question

我试图用 url 打开一个模态，但在刷新页面 url 后保持正确但模态不会打开。这是代码示例，但在我的项目中，模式不是绝对打开，而是位置状态：true 是正确的。

Answer 1

在开发工具中也未定义

像这样使用本地存储：

创建一个状态变量来保存模态状态

this.state = { isModalOpen: false };

在Link上更改局部变量并将模态状态保存到本地存储

 <Link
   className="frontpage-job"
   to={"/modal/1"}
   onClick={() => {
     localStorage.setItem("isModalOpen", JSON.stringify(true));
     this.setState({ isModalOpen: true });
  }}
   >
    modal
 </Link>

现在，如果您在组件安装时刷新，将 isModalOpen 更改为 true 只有它为 true

componentDidMount() {
    let isModalOpen = localStorage.getItem("isModalOpen");
    isModalOpen = JSON.parse(isModalOpen);
    if (isModalOpen) this.setState({ isModalOpen });
  }

最后但并非最不重要的是创建一个 closeModal 方法来关闭模态，清理 url 并重置本地存储值

closeModal = () => {
    localStorage.setItem("isModalOpen", JSON.stringify(false));
    this.setState({ isModalOpen: false });
    this.props.history.push("/");
  };

将其作为道具传递给模态实例

<Modal isModal={isModalOpen} closeModal={this.closeModal} />

现在，如果您已打开模态并刷新模态，则该模态仍保持打开状态。如果你关闭它并刷新它是关闭的

Demo

在模态中反应路由器刷新

1 个答案: