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动画不应用输入/离开类

回答

相关问题