diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index 53423d3c57..1c37a33cc3 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -29,7 +29,6 @@ var ReactMount = require('ReactMount'); var ReactPerf = require('ReactPerf'); var escapeTextForBrowser = require('escapeTextForBrowser'); -var flattenChildren = require('flattenChildren'); var invariant = require('invariant'); var keyOf = require('keyOf'); var merge = require('merge'); @@ -171,7 +170,7 @@ ReactDOMComponent.Mixin = { return escapeTextForBrowser(contentToUse); } else if (childrenToUse != null) { var mountImages = this.mountChildren( - flattenChildren(childrenToUse), + childrenToUse, transaction ); return mountImages.join(''); @@ -346,7 +345,7 @@ ReactDOMComponent.Mixin = { ); } } else if (nextChildren != null) { - this.updateChildren(flattenChildren(nextChildren), transaction); + this.updateChildren(nextChildren, transaction); } }, diff --git a/src/core/ReactMultiChild.js b/src/core/ReactMultiChild.js index 6bfe277bd6..e0e12cd82e 100644 --- a/src/core/ReactMultiChild.js +++ b/src/core/ReactMultiChild.js @@ -22,6 +22,8 @@ var ReactComponent = require('ReactComponent'); var ReactMultiChildUpdateTypes = require('ReactMultiChildUpdateTypes'); +var flattenChildren = require('flattenChildren'); + /** * Given a `curChild` and `newChild`, determines if `curChild` should be * updated as opposed to being destroyed or replaced. @@ -190,11 +192,12 @@ var ReactMultiChild = { * Generates a "mount image" for each of the supplied children. In the case * of `ReactDOMComponent`, a mount image is a string of markup. * - * @param {?object} children As returned by `flattenChildren`. + * @param {?object} nestedChildren Nested child maps. * @return {array} An array of mounted representations. * @internal */ - mountChildren: function(children, transaction) { + mountChildren: function(nestedChildren, transaction) { + var children = flattenChildren(nestedChildren); var mountImages = []; var index = 0; this._renderedChildren = children; @@ -248,14 +251,14 @@ var ReactMultiChild = { /** * Updates the rendered children with new children. * - * @param {?object} nextChildren As returned by `flattenChildren`. + * @param {?object} nextNestedChildren Nested child maps. * @param {ReactReconcileTransaction} transaction * @internal */ - updateChildren: function(nextChildren, transaction) { + updateChildren: function(nextNestedChildren, transaction) { updateDepth++; try { - this._updateChildren(nextChildren, transaction); + this._updateChildren(nextNestedChildren, transaction); } catch (error) { updateDepth--; updateDepth || clearQueue(); @@ -269,12 +272,13 @@ var ReactMultiChild = { * Improve performance by isolating this hot code path from the try/catch * block in `updateChildren`. * - * @param {?object} nextChildren As returned by `flattenChildren`. + * @param {?object} nextNestedChildren Nested child maps. * @param {ReactReconcileTransaction} transaction * @final * @protected */ - _updateChildren: function(nextChildren, transaction) { + _updateChildren: function(nextNestedChildren, transaction) { + var nextChildren = flattenChildren(nextNestedChildren); var prevChildren = this._renderedChildren; if (!nextChildren && !prevChildren) { return;