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

Question

我有一个包含 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>
    );

Answer 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