是否可以在ReactJS中的表单元格上设置CSSTransitionGroup

Question

考虑这个JSX结构：

<table>
  <tbody>
    <tr>
      <td>{this.props.firstName}</td>
      <td>{this.props.lastName}</td>
    </tr>
  </tbody>  
</table>

当其中一个道具更新时，我想使用CSSTransitionGroup来设置td的背景颜色，如下所示：

<table>
  <tbody>
    <tr>
      <ReactCSSTransitionGroup transitionName="example">
        <td key={this.props.firstName}>{this.props.firstName}</td>
      </ReactCSSTransitionGroup>
      <td>{this.props.lastName}</td>
    </tr>
  </tbody>  
</table>

这里的问题是ReactCSSTransitionGroup呈现为一个跨度，它不是表行的有效子级。那么，React是否可以在表格单元格上设置进入/离开动画？

Answer 1

React CSS Transitions可以指定为使用不同于span的容器元素，如果您愿意的话，可以使用component属性。

http://facebook.github.io/react/docs/animation.html#rendering-a-差分

如果这不起作用，我建议不要使用表，而是使用div，也许可以使用display:table/table-row/table-cell。