Don't return null children from flattenChildren
This simplifies ReactMultiChild a little bit and will make it more practical to coalesce adjacent text strings.
Ben Alpert committed
Dec 29, 2013 at 12:19 UTC
e1ec9a6c65cbaf5c0dbdb976a0c86e86c4485b0c
3 files changed
+20
-24
src/core/ReactMultiChild.js
+9
-13
@@ -191,7 +191,7 @@ var ReactMultiChild = {
191
this._renderedChildren = children;
192
for (var name in children) {
193
var child = children[name];
194
- if (children.hasOwnProperty(name) && child) {
194
+ if (children.hasOwnProperty(name)) {
195
// Inlined for performance, see `ReactInstanceHandles.createReactID`.
196
var rootID = this._rootNodeID + '.' + name;
197
var mountImage = child.mountComponent(
@@ -220,8 +220,7 @@ var ReactMultiChild = {
220
var prevChildren = this._renderedChildren;
221
// Remove any rendered children.
222
for (var name in prevChildren) {
223
- if (prevChildren.hasOwnProperty(name) &&
224
- prevChildren[name]) {
223
+ if (prevChildren.hasOwnProperty(name)) {
224
this._unmountChildByName(prevChildren[name], name);
225
}
226
}
@@ -293,20 +292,15 @@ var ReactMultiChild = {
292
lastIndex = Math.max(prevChild._mountIndex, lastIndex);
293
this._unmountChildByName(prevChild, name);
294
}
296
- if (nextChild) {
297
- this._mountChildByNameAtIndex(
298
- nextChild, name, nextIndex, transaction
299
- );
300
- }
301
- }
302
- if (nextChild) {
303
- nextIndex++;
295
+ this._mountChildByNameAtIndex(
296
+ nextChild, name, nextIndex, transaction
297
+ );
298
}
299
+ nextIndex++;
300
}
301
// Remove children that are no longer present.
302
for (name in prevChildren) {
303
if (prevChildren.hasOwnProperty(name) &&
309
- prevChildren[name] &&
304
!(nextChildren && nextChildren[name])) {
305
this._unmountChildByName(prevChildren[name], name);
306
}
@@ -323,7 +317,8 @@ var ReactMultiChild = {
317
var renderedChildren = this._renderedChildren;
318
for (var name in renderedChildren) {
319
var renderedChild = renderedChildren[name];
326
- if (renderedChild && renderedChild.unmountComponent) {
320
+ // TODO: When is this not true?
321
+ if (renderedChild.unmountComponent) {
322
renderedChild.unmountComponent();
323
}
324
}
@@ -413,6 +408,7 @@ var ReactMultiChild = {
408
* @private
409
*/
410
_unmountChildByName: function(child, name) {
411
+ // TODO: When is this not true?
412
if (ReactComponent.isValidComponent(child)) {
413
this.removeChild(child);
414
child._mountImage = null;
src/utils/flattenChildren.js
+5
-2
@@ -35,11 +35,14 @@ function flattenSingleChildIntoContext(traverseContext, child, name) {
35
'Children keys must be unique.',
36
name
37
);
38
- result[name] = child;
38
+ if (child != null) {
39
+ result[name] = child;
40
+ }
41
}
42
43
/**
42
- * Flattens children that are typically specified as `props.children`.
44
+ * Flattens children that are typically specified as `props.children`. Any null
45
+ * children will not be included in the resulting object.
46
* @return {!object} flattened children keyed by name.
47
*/
48
function flattenChildren(children) {
src/utils/sliceChildren.js
+6
-9
@@ -42,15 +42,12 @@ function sliceChildren(children, start, end) {
42
continue;
43
}
44
var child = flattenedMap[key];
45
- // In this version of slice children we ignore empty children.
46
- if (child !== null) {
47
- if (ii >= start) {
48
- slicedChildren[key] = child;
49
- }
50
- ii++;
51
- if (end != null && ii >= end) {
52
- break;
53
- }
45
+ if (ii >= start) {
46
+ slicedChildren[key] = child;
47
+ }
48
+ ii++;
49
+ if (end != null && ii >= end) {
50
+ break;
51
}
52
}
53
return slicedChildren;