如何在setState上製作ReactCSSTransitionGroup動畫元素？

Question

如何通過setInterval使元素動態變化狀態？ 試圖呈現在隨機位置的元素，並嘗試動畫位置的變化如下：

var Elem = React.createClass({ 
     render: function() { 
      return (
       <h1 className="elem"> 
        Hello, {this.props.name} ! 
       </h1> 
      ); 
     } 
    }); 


    var MainContainer = React.createClass({ 
     componentDidMount: function() { 
      setInterval(this.shf, 777); 
     }, 
     getInitialState: function() { 
      return {source: []}; 
     }, 
     shf: function() { 
      var source = this.props.source.sort(function() { 
       return .5 - Math.random(); 
      }); 
      this.setState({ 
       source: source 
      }); 
     }, 

     render: function() { 
      var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 
      var Elems = this.state.source.map(function (elem, i) { 
       return (
        <ReactCSSTransitionGroup key={i * 10} 
              transitionName="example" 
              transitionAppear={true} transitionAppearTimeout={500} 
              transitionEnter={true} transitionLeave={true}> 
         <Elem key={i} number={i} name={elem}/> 
        </ReactCSSTransitionGroup> 
       ); 
      }, this); 
      return (
       <div> 
        {Elems} 
       </div> 
      ); 
     } 
    }); 
    ReactDOM.render(<MainContainer source={["bill", "bob", "sam", "john", "smith"]}/>, 
     document.getElementById('container')); 

與風格CodePen鏈接：http://codepen.io/anon/pen/ZOQmJX

這是動畫渲染第一次，但不是在每一個國家的變化，如何實現它？

Answer 1

componentDidMount: function() { 
    setInterval(this.shf, 777); 
} 

=>

componentDidMount: function() { 
    setInterval(()=>this.shf(), 777); 
} 

當的setState被調用時，this.state.source發生了變化，但ReactCSSTransitionGroup節點的孩子沒有變化，用同樣的密鑰和相同的序列5個節點。

render: function() { 
     var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 
     var Elems = this.state.source.map(function (elem, i) { 
      return (
        <Elem key={elem} number={i} name={elem}/> 
      ); 
     }, this); 
     return (
      <ReactCSSTransitionGroup 
             transitionName="example" 
             transitionAppear={true} transitionAppearTimeout={500} 
             transitionEnter={true} transitionLeave={true}> 
       {Elems} 
      </ReactCSSTransitionGroup> 
     ); 
    } 

或只改變

<Elem key={elem} number={i} name={elem}/>