javascript - 仅在初始渲染后才 react CSS 动画

Question

我正在构建一个 React 应用程序，其中可以将一个人添加到 ScheduleCell。添加 Person 后，他可以确认或拒绝他的存在，这将触发 CSS 动画以向观看日程表的人显示刚刚发生的事情。

一切正常，除了当我第一次加载时间表时，如果每个人已经确认或拒绝提议，他都会动画。

一图胜千言，我的问题是:

有没有一种方法可以检测到 Person 是第一次渲染，这样我就不会添加触发 CSS 动画的 CSS 类，并且能够在下次添加该类？

这里有一些(咖啡)代码更清楚:

Person = React.createClass
  render: ->
    confirmation = @props.person.confirmation
    className = 'alert '
    if confirmation == undefined
      className += 'neutral'
    else if confirmation == true
      className += 'good '
      className += 'hvr-wobble-vertical' if @animate
    else if confirmation == false
      className += 'bad  '
      className += 'hvr-wobble-horizontal' if @animate
    <div className={className}
      {@props.person.username}
    </div>

我在这里想要的是 @animate 在组件首次呈现时(在页面加载时)返回 false，然后在呈现后始终返回 true。

我试过这样做，但似乎行不通:

getInitialState: ->
  { mounted: false }
componentDidMount: ->
  @setState { mounted: true }
animate: ->
  @state.mounted

谢谢你的时间，

干杯!

Answer 1

你可以听componentWillReceiveProps(nextProps) ，将 @props.person.confirmation 与 nextProps.person.confirmation 进行比较，并在 @state 中设置一个标志以指示组件应该摆动。

componentWillReceiveProps: (nextProps) ->
  if nextProps.person.confirmation != @props.person.confirmation
    @setState
      wobble: if nextProps.person.confirmation then 'vertical' else 'horizontal'