React CCSTransitionGroup動畫不應用輸入/離開類

我想寫一個簡單的頁面滑塊。在這裏，當我點擊一個頁面時，它會創建一個包含隨機內容的新頁面，並重新呈現App組件。在應用程序渲染（）上，而不是TransitionGroup持有兩個state.pages直到動畫完成，它只是切換出頁面，從不附加輸入離開類和不執行css動畫。我確信我在生命週期中搞砸了一些東西，但想不起來。React CCSTransitionGroup動畫不應用輸入/離開類

感謝您的期待！

var Page = React.createClass({ 
    handleClick: function(){ 
    var pgs = ['page-one','page-two','page-three','page-four'] 
    currentIdx = Math.floor(Math.random() * pgs.length); 
    var pg = pgs[ currentIdx ]; 
    var newPg = <Page html={pg} title={'Title for ' + pg} />; 
    React.renderComponent(<App newPage={newPg} />, document.body) 
    }, 
    render: function(){ 
    return (<div className="content" style={{paddingTop: 44}} onClick={this.handleClick}>{this.props.html}</div>); 
    } 
}) 

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var App = React.createClass({ 
    getInitialState: function() { 
    return {pages: [<Page html="initial page" title="initial title" />]}; 
    }, 
    componentWillMount: function(){ 
    this.setState({pages: [this.props.newPage]}) 
    }, 
    componentWillReceiveProps: function(nextProps) { 
     this.setState({pages: [nextProps.newPage]}); 
    }, 
    render: function() { 
    var title = this.state.pages.length ? this.state.pages[ this.state.pages.length - 1 ].props.title : 'none'; 
    return (
     <div id="body"> 
     <TitleBar title={title} /> 
     <ReactCSSTransitionGroup transitionName="pg" id="transdiv" component={React.DOM.div}> 
      {this.state.pages} 
     </ReactCSSTransitionGroup> 
     </div> 
    ); 
    } 
});

來源

2014-07-14 shane

問題是（我是設定Page.render（）翻頁鍵（上面沒有顯示），而不是在App.render）我不知道爲什麼你不能設置在按鍵孩子/擁有的組件，只要它們是唯一的，但是這解決了我的問題。

var App = React.createClass({ 

    // other methods are same 

    render: function(){ 
     var title = 'Title'; 
     var pgs = this.state.pages.map(function(pg){ 

      // SET KEY HERE 
      pg.props.key = pg.props.title; 
      return pg; 
     } 
     return (
      <div id="body"> 
       <TitleBar title={title} /> 
       <ReactCSSTransitionGroup transitionName="pg" id="transdiv" component={React.DOM.div}> 
        {pgs} 
       </ReactCSSTransitionGroup> 
      </div> 
     ); 
    } 
}

此外，如果任何人都可以告訴我正確的方式來設置卸載組件的道具，請告訴我。直接設置它們可行，但它感覺不對。

來源

2014-07-15 01:33:39 shane

「我不確定爲什麼只要它們是唯一的，你就不能在子/組件中設置密鑰。」從根本上說，孩子的組成部分無法知道其兄弟姐妹是誰，所以父母是必須選擇鑰匙的人。創建組件（描述符）後，不應該改變道具;最好先預先指定所有的道具，並且在未來的React版本中可能不允許這樣的變異道具。在您的情況下，您可能首先需要將密鑰存儲在''組件或存儲純模型數據，並且每次渲染時都會創建組件（帶有密鑰）。 –

React CCSTransitionGroup動畫不應用輸入/離開類

回答

相關問題