Skip to content

Instantly share code, notes, and snippets.

@chenglou
Last active August 29, 2015 13:56
Show Gist options
  • Save chenglou/8941228 to your computer and use it in GitHub Desktop.
Save chenglou/8941228 to your computer and use it in GitHub Desktop.
/** @jsx React.DOM */
'use strict';
var Group = React.addons.TransitionGroup;
var Item = React.createClass({
componentWillEnter: function(done) {
this.props.componentWillEnter();
done();
},
componentDidEnter: function() {
this.props.componentDidEnter();
},
componentWillLeave: function(done) {
this.props.componentWillLeave();
done();
},
componentDidLeave: function() {
this.props.componentDidLeave();
},
render: function() {
return <div>{this.props.title}</div>;
}
});
var App = React.createClass({
getInitialState: function() {
return {
items: [1, 2, 3]
};
},
componentDidMount: function() {
setTimeout(function() {
this.setState({
items: [0, 1, 2, 3]
});
}.bind(this), 1000);
setTimeout(function() {
this.setState({
items: [0, 2, 3]
});
}.bind(this), 2000);
console.log(this.refs.group.props.children[0]._lifeCycleState); // unmounted
},
handleComponentWillEnter: function() {
// outputs [0, 1, 2, 3]
// expected [1, 2, 3]
// see willLeave
console.log('WillEnter', this.state.items);
},
handleComponentDidEnter: function() {
// right
console.log('DidEnter', this.state.items);
},
handleComponentWillLeave: function() {
// outputs [0, 2, 3]
// expected [0, 1, 2, 3]
// basing calculations on this.state.items would do the wrong thing
// what if I want to loop through the items and... blabla
console.log('WillLeave', this.state.items);
},
handleComponentDidLeave: function() {
// right
console.log('DidLeave', this.state.items);
},
render: function() {
return (
<Group ref="group">
{
this.state.items.map(function(item, i) {
return (
<Item
ref={i}
title={item}
componentWillEnter={this.handleComponentWillEnter}
componentDidEnter={this.handleComponentDidEnter}
componentWillLeave={this.handleComponentWillLeave}
componentDidLeave={this.handleComponentDidLeave}>
{item}
</Item>
);
}, this)
}
</Group>
);
}
});
React.renderComponent(<App />, document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment