Javascript 使用React TransitionGroup

Javascript 使用React TransitionGroup,javascript,reactjs,Javascript,Reactjs,我正在尝试让一个简单的“抽屉”组件进行测试。我现在所拥有的一切。如果您尝试运行它,它会工作,但我得到了错误: 未捕获类型错误:无法读取未定义的属性“componentWillLeave” 我做错了什么 var DrawerInner = React.createClass({ componentWillEnter: function(cb) { var $el = $(this.getDOMNode()); var height = $el[0].scrollHeight;

我正在尝试让一个简单的“抽屉”组件进行测试。我现在所拥有的一切。如果您尝试运行它,它会工作,但我得到了错误:

未捕获类型错误:无法读取未定义的属性“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>
    );
  }
});
var DrawerInner=React.createClass({
组件输入:函数(cb){
var$el=$(this.getDOMNode());
变量高度=$el[0]。滚动高度;
$el.stop(true).height(0).animate({height:height},200,cb);
},
组件将离开:功能(cb){
var$el=$(this.getDOMNode());
$el.stop(true).animate({height:0},200,cb);
},
render:function(){
返回{this.props.children};
}
});
var Drawer=React.createClass({
getInitialState:函数(){
返回{
开放:假
};
},
componentWillMount:function(){
这是我的国家({
打开:这个。道具。打开
});
},
组件将接收道具:功能(道具){
这是我的国家({
打开:道具,打开
});
},
打开:函数(){
这是我的国家({
开放:是的
});
},
关闭:函数(){
这是我的国家({
开放:假
});
},
切换:函数(){
这是我的国家({
打开:!this.state.open
});
},
render:function(){
返回(
{this.state.open&&{this.props.children}
);
}
});

看起来这是ReactTransitionGroup中的一个bug。我刚刚提出了一个解决方案