是否可以在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 Transitions使用与跨度不同的容器元素。

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

如果不工作，我会建议不使用一个表，并使用div的替代，或许与显示：表/表行/表单元格。