内联样式和 ReactCSSTransitionGroup答案

【问题标题】：Inline styles and ReactCSSTransitionGroup内联样式和 ReactCSSTransitionGroup
【发布时间】：2016-01-20 19:26:06
【问题描述】：

我可以将react-addons-css-transition-group 中的ReactCSSTransitionGroup 与React 内联样式一起使用吗？如果有，怎么做？

我正在开发的组件：

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)

【问题讨论】：

我假设您可以使用内联样式，只要您正确命名它们，即在您的情况下为 notification-enter、notification-leave 等。
@Aperçu 如果未应用内联样式，则不会出现“错误”。
@jukka.aalto 尝试将style={tstyle} 添加到Notification 组件并将其传递给子组件。
目前不支持内联样式过渡 :(

标签： javascript css reactjs redux

【解决方案1】：

ReactCSSTransitionGroup 与内联样式不兼容，因为它向 DOM 节点添加或删除类名以触发转换。但是你可以使用ReactTransitionGroup 来制作你自己的组件，它和 ReactCSSTransitionGroup 做的事情是一样的，但是有内联样式。

如果你不想自己开发，可以使用我前段时间写的用 npm 安装它：ReactInlineTransitionGroup。

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

【讨论】：

【解决方案2】：

这样做

style={{
                // flex: over ? 1 : null,
                display: 'flex',
                width: wide ? 400 : null,
                paddingBottom: wide ? 500 : null,
                border: over ? '4px solid greenyellow' : null,
                borderRadius: wide ? 30 : null,
                paddingVertical: over ? 500 : null,
                background: over ? 'black' : 'white',
                transition:
                    'background 500ms',
                cursor: 'pointer',
            }}

或者如果您想获得多个属性

style={{
                display: 'flex',
                width: wide ? 400 : null,
                paddingBottom: wide ? 500 : null,
                border: over ? '4px solid greenyellow' : null,
                borderRadius: wide ? 30 : null,
                paddingVertical: over ? 500 : null,
                background: over ? 'black' : 'white',
                transition:
                    'background 500ms, padding 500ms, width 500ms, border 500ms',
                cursor: 'pointer',
            }}

【讨论】：