Looks like this is a bug in ReactTransitionGroup. I've just put up a fix ReactTransitionGroup: Fix moving from falsey child.
Working with React TransitionGroups
-
16-07-2023 - |
سؤال
I'm trying to get a simple "drawer" component working to test React's TransitionGroups. What I have so far below and on JSBin. If you try to run it, it works but I'm getting the error:
Uncaught TypeError: Cannot read property 'componentWillLeave' of undefined
What am I doing wrong here?
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>
);
}
});
المحلول
لا تنتمي إلى StackOverflow