使用反應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的錯誤。我剛剛提出了一個修復：

https://github.com/facebook/react/pull/1492