Fix text component rendering with server markup
These weren't caught by CI in #5753 because we don't automatically test that yet... fixing that next.
Ben Alpert committed
Feb 18, 2016 at 17:21 UTC
e8fb8c7870b8e5b57d3a5c17e30f7c3359aff3ff
2 files changed
+23
-6
src/renderers/dom/shared/ReactDOMTextComponent.js
+22
-5
@@ -18,6 +18,7 @@ var ReactPerf = require('ReactPerf');
18
19
var assign = require('Object.assign');
20
var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
21
+var invariant = require('invariant');
22
var validateDOMNesting = require('validateDOMNesting');
23
24
/**
@@ -46,7 +47,7 @@ var ReactDOMTextComponent = function(text) {
47
// Properties
48
this._domID = null;
49
this._mountIndex = 0;
49
- this._openingComment = null;
50
+ this._closingComment = null;
51
this._commentNodes = null;
52
};
53
@@ -98,8 +99,8 @@ assign(ReactDOMTextComponent.prototype, {
99
);
100
}
101
DOMLazyTree.queueChild(lazyTree, DOMLazyTree(closingComment));
101
- this._openingComment = openingComment;
102
- ReactDOMComponentTree.precacheNode(this, closingComment);
102
+ ReactDOMComponentTree.precacheNode(this, openingComment);
103
+ this._closingComment = closingComment;
104
return lazyTree;
105
} else {
106
var escapedText = escapeTextContentForBrowser(this._stringText);
@@ -149,13 +150,29 @@ assign(ReactDOMTextComponent.prototype, {
150
if (nativeNode) {
151
return nativeNode;
152
}
152
- nativeNode = [this._openingComment, this._nativeNode];
153
+ if (!this._closingComment) {
154
+ var openingComment = ReactDOMComponentTree.getNodeFromInstance(this);
155
+ var node = openingComment.nextSibling;
156
+ while (true) {
157
+ invariant(
158
+ node != null,
159
+ 'Missing closing comment for text component %s',
160
+ this._domID
161
+ );
162
+ if (node.nodeType === 8 && node.nodeValue === ' /react-text ') {
163
+ this._closingComment = node;
164
+ break;
165
+ }
166
+ node = node.nextSibling;
167
+ }
168
+ }
169
+ nativeNode = [this._nativeNode, this._closingComment];
170
this._commentNodes = nativeNode;
171
return nativeNode;
172
},
173
174
unmountComponent: function() {
158
- this._openingComment = null;
175
+ this._closingComment = null;
176
this._commentNodes = null;
177
ReactDOMComponentTree.uncacheNode(this);
178
},
src/test/ReactDefaultPerf.js
+1
-1
@@ -233,7 +233,7 @@ var ReactDefaultPerf = {
233
// Old node is already unmounted; can't get its instance
234
id = ReactDOMComponentTree.getInstanceFromNode(args[1].node)._rootNodeID;
235
} else if (fnName === 'replaceDelimitedText') {
236
- id = getID(ReactDOMComponentTree.getInstanceFromNode(args[1]));
236
+ id = getID(ReactDOMComponentTree.getInstanceFromNode(args[0]));
237
} else if (typeof id === 'object') {
238
id = getID(ReactDOMComponentTree.getInstanceFromNode(args[0]));
239
}