是否可以在 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

如果您愿意，可以使用 component 属性指定 React CSS 过渡使用与 span 不同的容器元素。

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

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