Reactstrap이있는 로그인 링크가있는 헤더를 만듭니다. 사용자가 로그인 링크를 클릭하면 모달은 로그인을위한 다양한 옵션을 보여주는 나타납니다 여기에 내 코드입니다 :.Reactstrap 모달이 페이드 인하지 않고 페이드 아웃합니다.
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 prop가 true로 설정되어 있습니다. 난 수동으로 fade={true}
또는 약식 fade
그냥 설정 시도했다. 그것은 문제를 해결하지 못했습니다. 나는 페이드 효과를 일으키기 위해 modalTransition과 backdropTransition 소품을 설정해 보았습니다. 여전히 효과가 없었습니다. 누군가이 문제를 도와 줄 수 있습니까?
답장을 보내 주셔서 감사합니다. React 16에서만 발생하는 버그가 궁금합니다. 문서의 예제가 잘 작동하기 때문에 이전 버전의 React를 사용하고 있다고 가정합니다. – avatarhzh