React Modal Popup 无需取消渲染当前页面

编程问答 2022-05-02

问题描述

我正在尝试向应用程序添加一项新功能，用户可以在其中单击帖子并能够在模式页面中查看其内容。当他们在模态内容之外点击后，他们可以返回到他们离开的上一页，而不会发生任何刷新。我已经尝试了多种方法来实现这一点，但是当它们返回时，它们都会导致刷新。到目前为止，这是我的实现：

在 index.html 中，我添加了一个额外的 div，“modal_root”以使用 react 创建门户

<div id="root"></div>
<div id="modal_root"></div>

在App.tsx中，我有如下场景的路由：

<Router>
  <div className={styles.appbody}>
    <Switch >
      <AuthenticatedRoute exact={true} path="/profile/:id" Component={UserProfile} />
      <AuthenticatedRoute exact={true} path="/profile/:id/photos/:postId/:imageId" Component={ModalPostEntry} />

UserProfile 组件：

{
(array defined) ? (<span> nothing To Show</span>) : (array?.map((elem,idx) => {
  return (
    <div >
      <Link to={{ pathname : `newlink`,state: { modal: true,callBackURL : window.location.pathname } }} >
        <img src={getDataArg(elem["image_location"])}/> 
      </Link>
    </div>
)}))
}

ModalPostEntry 组件：

// callback passed to modal component
const currURL = location.state.callBackURL;
const testProps = {
  onClick : () => {
    history.replace(currURL); // also tried history.push 
  }
}
return (
  <div>
    { window.location.pathname.includes('photos') && <ModalPost
                {...testProps}
            > </ModalPost> 
     }
  </div>
);

ModalPost 组件（现在只显示随机元素）：

return ReactDOM.createPortal(
  <div className={styles.testing} onClick={() => onClick()}> Stuff </div>,document.getElementById('modal_root') as Element
);

这里的任何指导将不胜感激。我几乎使用本教程中的实现来尝试这样做：https://www.youtube.com/watch?v=-t7PgfHHHOw 我不确定我在做什么不同，或者是否有非常不同的路线:) 我需要在这里。这个想法是在一个新的链接中渲染模态组件而不取消当前的渲染，所以当我们退出模态组件时，我们会转到仍然存在的前一个链接。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlmodalviewcontrollermodalviewcontrollerreact-routerreactjsreactjsreactjsreactjstypescripttypescripttypescript