javascript - 使用 React TransitionGroups

Question

我正在尝试让一个简单的“抽屉”组件工作以测试 React's TransitionGroups .到目前为止我所拥有的JSBin .如果您尝试运行它，它可以运行，但我收到错误:

未捕获的类型错误:无法读取未定义的属性“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>
    );
  }
});

Answer 1

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