Встраиваемые стили и ReactCSSTransitionGroup

Question

Возможно ли использовать ReactCSSTransitionGroup от react-addons-css-transition-group с использованием встроенных стилей? Если да, то как?

Компонент Я работаю на:

import React, { Component } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 

import { removeNotification } from '../actionCreators' 
import Notification from './Notification' 

const mapStateToProps = state => ({ 
    notifications: state.notifications 
}) 

const mapDispatchToProps = dispatch => ({ 
    actions: bindActionCreators({ removeNotification }, dispatch) 
}) 

class Notifications extends Component { 
    render() { 
    var style = { 
     position: 'fixed', 
     top: 20, 
     right: 20, 
     width: 300, 
     zIndex: 99 
    } 
    var tstyle = { 
     'notification-enter': { 
     visibility: 'hidden', 
     transform: 'translate3d(100%,0,0)' 
     }, 
     'notification-leave': { 
     visibility: 'visible', 
     transform: 'translate3d(0,0,0)' 
     }, 
     'notification-enter-notification-enter-active': { 
     visibility: 'visible', 
     transform: 'translate3d(0,0,0)', 
     transition: 'all 0.4s' 
     }, 
     'notification-leave-notification-leave-active': { 
     visibility: 'hidden', 
     transform: 'translate3d(100%,0,0)', 
     transition: 'all 0.4s' 
     } 
    } 

    return (
     <ul style={style}> 
     <ReactCSSTransitionGroup 
      style={tstyle} 
      transitionName='notification' 
      transitionEnterTimeout={400} 
      transitionLeaveTimeout={400}> 
      {this.props.notifications.map((notification, index) => { 
      return <Notification 
        key={index} 
        type={notification.type} 
        message={notification.message} 
        timeout={10000} 
        remove={this.props.actions.removeNotification} /> 
      })} 
     </ReactCSSTransitionGroup> 
     </ul> 
    ) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Notifications) 

Answer 1

ReactCSSTransitionGroup не совместим с встроенных стилей, потому что он добавляет или удаляет имена классов в/из DOM узлов, чтобы вызвать переходы. Но вы можете использовать ReactTransitionGroup, чтобы создать свой собственный компонент, который делает то же самое, что и ReactCSSTransitionGroup, но с встроенными стилями.

Если вы не хотите разрабатывать свои собственные, вы можете использовать тот, который я написал некоторое время назад, установив его с помощью npm: ReactInlineTransitionGroup.

У этого есть некоторые преимущества перед ReactCSSTransitionGroup, так же как тот факт, что вы можете писать свои переходы CSS и не беспокоиться о настройке свойств тайм-аута в компоненте и что вы можете передавать обратные вызовы, чтобы проверить, когда ребенок ввел или покинул вашу группу.