Make ReactTransitionGroup work with a null child
Ben Alpert committed
Jan 6, 2014 at 17:40 UTC
c75899f27753c5f67cdbd7b73606fe97bda8ded9
2 files changed
+18
-10
src/addons/transitions/ReactTransitionGroup.js
+3
-2
@@ -62,8 +62,9 @@ var ReactTransitionGroup = React.createClass({
62
var children = {};
63
var childMapping = ReactTransitionKeySet.getChildMapping(sourceChildren);
64
65
+ var prevKeys = this._transitionGroupCurrentKeys;
66
var currentKeys = ReactTransitionKeySet.mergeKeySets(
66
- this._transitionGroupCurrentKeys,
67
+ prevKeys,
68
ReactTransitionKeySet.getKeySet(sourceChildren)
69
);
70
@@ -73,7 +74,7 @@ var ReactTransitionGroup = React.createClass({
74
// may look up an old key in the new children, and it may switch to
75
// undefined. React's reconciler will keep the ReactTransitionableChild
76
// instance alive such that we can animate it.
76
- if (childMapping[key] || this.props.transitionLeave) {
77
+ if (childMapping[key] || (this.props.transitionLeave && prevKeys[key])) {
78
children[key] = ReactTransitionableChild({
79
name: this.props.transitionName,
80
enter: this.props.transitionEnter,
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+15
-8
@@ -118,13 +118,20 @@ describe('ReactTransitionGroup', function() {
118
expect(a.getDOMNode().childNodes[1].id).toBe('two');
119
});
120
121
- describe('with an undefined child', function () {
122
- it('should fail silently', function () {
123
- React.renderComponent(
124
- <ReactTransitionGroup transitionName="yolo">
125
- </ReactTransitionGroup>,
126
- container
127
- );
128
- });
121
+ it('should work with no children', function () {
122
+ React.renderComponent(
123
+ <ReactTransitionGroup transitionName="yolo">
124
+ </ReactTransitionGroup>,
125
+ container
126
+ );
127
+ });
128
+
129
+ it('should work with a null child', function () {
130
+ React.renderComponent(
131
+ <ReactTransitionGroup transitionName="yolo">
132
+ {[null]}
133
+ </ReactTransitionGroup>,
134
+ container
135
+ );
136
});
137
});