是否可以在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呈现为span,它不是表行的有效子.那么React可以在表格单元格上设置进入/离开动画吗？

Answer 1

如果您希望使用该component属性,可以指定React CSS Transitions使用与span不同的容器元素.

http://facebook.github.io/react/docs/animation.html#rendering-a-different-component

如果这不起作用,我建议不要使用表格而不是使用div,也许使用display:table/table-row/table-cell.