是否有可能在关闭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>
);
}