2017-11-03 19 views
0

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 소품을 설정해 보았습니다. 여전히 효과가 없었습니다. 누군가이 문제를 도와 줄 수 있습니까?

답변

1

불행히도 이것은 반응 스트랩이있는 버그 인 것 같습니다. 여기 Github 문제를 참조하십시오 : https://github.com/reactstrap/reactstrap/issues/607

+0

답장을 보내 주셔서 감사합니다. React 16에서만 발생하는 버그가 궁금합니다. 문서의 예제가 잘 작동하기 때문에 이전 버전의 React를 사용하고 있다고 가정합니다. – avatarhzh