是否可以在关闭之前阻止 Reactstrap 模态卸载？

Posted 2023-03-23

【中文标题】是否可以在关闭之前阻止 Reactstrap 模态卸载？

【英文标题】：Is it possible to keep a Reactstrap modal from unmounting before it has closed?

【发布时间】：2020-03-30 01:01:12

【问题描述】：

我有一个包含 Reactstrap 模式的组件。当模态函数完成时，将调用切换函数。此外，不再安装模态框，因为应该显示不同的组件。不幸的是，这导致模态消失而不是转换。我正在寻找在过渡完成之前保持安装状态的最佳方法。

这是用于卸载的代码 （LoginModal 是正在卸载的模式）

render() 
    const  isAuthenticated = this.props;

    const authLinks = (
      <Fragment>
        <Nav navbar>

        </Nav>

        <Nav navbar>
          <NavItem>
            <Logout></Logout>
          </NavItem>
        </Nav>
      </Fragment>
    );

    const guestLinks = (
      <Fragment>
        <Nav>
          <NavItem>
            <LoginModal></LoginModal>
          </NavItem>
        </Nav>
      </Fragment>
    );

    return (
      <Navbar>
          isAuthenticated ? authLinks : guestLinks
        </Collapse>
      </Navbar>
    );

【问题讨论】：

你能提供一些关于如何卸载它的代码吗？

@JatinParmar 我在原帖中添加了一些代码

请检查答案，希望对你有用

【参考方案1】：

这是因为当您获得授权而不是使用关闭模式时 isOpen=false 你直接从父组件中删除它 您应该像这样将 isOpen 从父级传递到登录模式

render() 
const  isAuthenticated = this.props;

let authLinks=null;
let isOpen=false;

if(!isAuthenticated)isOpen=true;//we need to show login when user is not logged in
if(!isOpen)
    //when user is not logged in we will create nav link
    authLinks = (
      <Fragment>
        <Nav navbar>
        </Nav>
        <Nav navbar>
          <NavItem>
            <Logout></Logout>
          </NavItem>
        </Nav>
      </Fragment>
    );

//instead of not rendering when authenticated,you should pass isopen=false
//here isOpen from login modal will be passed to react strap modal
//isOpen=false will cause dialog modal to close with transition
const loginModal = (
        <LoginModal isOpen=isOpen ></LoginModal>
);

return (
  <Navbar>
      loginModal
      authLinks
    </Collapse>
  </Navbar>
);

您可以进一步阅读here

【讨论】：

我认为你误解了这个问题，isAuthenticated 不应该打开/关闭模式，而是显示/隐藏切换模式的按钮。

@GICMan 是的，但根据您的代码，可能不会导致这种看法