Модальное размонтирование react-bootstrap с анимацией

Я использую react-bootstrap (0.28.3) с React, встроенным в приложение Backbone.

В моем представлении Backbone я делаю что-то вроде этого: ReactDOM.render(React.createElement(MyModal, this.options}), this.el);

При уничтожении маршрута изменения представления/маршрутизатора Backbone у меня есть onDestroyed(), который размонтирует компонент React.

    onDestroyed() {
        ReactDOM.unmountComponentAtNode(this.el)
    }

Однако это приводит к исчезновению модального окна без анимации.

Как я могу размонтировать модальный режим react-bootstrap и изящно дождаться анимации?


reactjs react-bootstrap
person Alon Burg    schedule 11.02.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Modal принимает свойство show, которое заставит модальное исчезать, если для него установлено значение false. Поэтому, если вы можете повторно отрендерить компонент MyModal с show, установленным на false, и поместить логику размонтирования в setTimeout с требуемым временем, это должно сработать.

person frontsideair    schedule 24.02.2016
comment
В идеале я хотел бы иметь обратный вызов или получить обещание, когда show=false будет выполнено, но похоже, что этого хука сейчас не существует. - person Alon Burg; 25.02.2016
comment
В Modal есть обратный вызов onExited, который запускается после завершения перехода. Надеюсь, это поможет. - person frontsideair; 26.02.2016
comment
Как маршрутизаторы, такие как react-router, размонтируют модальные/оверлеи react-bootstrap, сохраняя при этом анимацию? Является ли onExited распространенным шаблоном? - person Alon Burg; 27.02.2016
comment
Хотя я не совсем уверен, вероятно, под капотом используется ReactCSSTransitionGroup. - person frontsideair; 28.02.2016