是否可以在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的替代，或許與顯示：表/錶行/表單元格。