javascript-内联样式和ReactCSSTransitionGroup

2019-11-19 05:36:11 阅读：211 来源： 互联网

我可以使用带有React内联样式的react-addons-css-transition-group中的ReactCSSTransitionGroup吗？如果是这样,怎么办？

我正在处理的组件：

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)

解决方法:

ReactCSSTransitionGroup与内联样式不兼容,因为它向DOM节点添加类名或从DOM节点中删除类名以触发转换.但是您可以使用ReactTransitionGroup来制作自己的组件,该组件可以执行ReactCSSTransitionGroup的相同操作,但是具有内联样式.

如果您不想自己开发,可以使用我前一段时间写的一个,并在npm上安装它：ReactInlineTransitionGroup.

与ReactCSSTransitionGroup相比,它具有一些优点,例如您可以编写CSS过渡而不必担心在组件中设置超时属性,并且可以传递回调以检查孩子何时进入或离开组.

标签：reactjs,redux,css,javascript
来源： https://codeday.me/bug/20191119/2033887.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-内联样式和ReactCSSTransitionGroup