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

Question

考虑这个 JSX 结构:

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

我想使用 CSSTransitionGroup在其中一个 Prop 更新时设置 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 Transitions 使用与 span 不同的容器元素。

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

如果这不起作用，我建议不要使用表格并改用 div，或许可以使用 display: table/table-row/table-cell。