javascript - 使用React TransitionGroups

我正在尝试获得一个简单的“抽屉”组件来测试React's TransitionGroups。到目前为止，我在JSBin上拥有什么。如果您尝试运行它，它可以工作，但出现错误:

未捕获的TypeError:无法读取未定义的属性'componentWillLeave'

我在这里做错了什么？

var DrawerInner = React.createClass({
  componentWillEnter: function(cb) {
    var $el = $(this.getDOMNode());
    var height = $el[0].scrollHeight;
    $el.stop(true).height(0).animate({height:height}, 200, cb);
  },
  componentWillLeave: function(cb) {
    var $el = $(this.getDOMNode());
    $el.stop(true).animate({height:0}, 200, cb);
  },
  render: function() {
    return <div className="drawer" ref="drawer">{this.props.children}</div>;
  }
});

var Drawer = React.createClass({
  getInitialState: function() {
    return {
      open: false
    };
  },
  componentWillMount: function() {
    this.setState({
      open: this.props.open
    });
  },
  componentWillReceiveProps: function(props) {
    this.setState({
      open: props.open
    });
  },
  open: function() {
    this.setState({
      open: true
    });
  },
  close: function() {
    this.setState({
      open: false
    });
  },
  toggle: function() {
    this.setState({
      open: !this.state.open
    });
  },
  render: function() {
    return (
      <ReactTransitionGroup transitionName="test" component={React.DOM.div}>
        {this.state.open && <DrawerInner key="content">{this.props.children}</DrawerInner>}
      </ReactTransitionGroup>
    );
  }
});

最佳答案

看起来这是ReactTransitionGroup中的错误。我刚刚修复了ReactTransitionGroup: Fix moving from falsey child。