Reactstrap Modal 不淡入而是淡出

Question

我正在使用 Reactstrap 构建一个 header 登录 link。当用户点击登录 link 时，应该会出现一个模式，显示不同的登录选项。这是我的代码：

export default class Header extends Component {
    state = {
        isOpen: false,
        modal: false
    }
    toggle = () => this.setState({ isOpen: !this.state.isOpen })
    toggleModal = () => this.setState({ modal: !this.state.modal })
    render() {
        return (
            <div>
                <Navbar light expand="md">
                    <NavbarBrand href="/">VoteMole</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                            <NavLink href="#" onClick={this.toggleModal}>
                                <NavItem>Login</NavItem>
                            </NavLink>
                        </Nav>
                    </Collapse>
                </Navbar>
                <Modal isOpen={this.state.modal} toggle={this.toggleModal}>
                    <ModalBody>Lorem Ipsum</ModalBody>
                </Modal>
            </div>
        )
    }
}

我遇到的问题是模式只会淡出但不会淡入。默认情况下，Modal 组件的 fade 属性设置为 true。我试过用 fade={true} 或 shorthand fade 手动设置它。它没有解决问题。我试过设置 modalTransition 和 backdropTransition 道具来触发淡入淡出效果。它仍然没有用。有人可以帮忙解决这个问题吗？

Answer 1

不幸的是，这似乎是 reactstrap 的一个错误。在此处查看未解决的 Github 问题：https://github.com/reactstrap/reactstrap/issues/607

Reactstrap Modal 不淡入而是淡出

Reactstrap Modal doesn't fade in but fades out

reactjs

reactstrap