Question

我试图写一个简单的页面滑块。在这里，当我单击一个页面时，它会创建一个包含随机内容的新页面，并重新呈现App组件。在App render（）上，而不是在动画完成之前保存两个state.pages的TransitionGroup，它只是关闭页面，从不附加enter-leave类而不执行css动画。我确定我在LifeCycle中搞砸了一些东西，但却无法想到它。

感谢您的期待！

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>
    );
  }
});

Answer 1

问题是我在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>
        );
    }
}

另外，如果有人能告诉我在未安装组件上设置道具的正确方法，请告诉我。直接设置它们有效，但感觉不对。

反应CCSTransitionGroup动画不应用进入/离开类

1 个答案: