Warn when rendering directly into document.body
This is in response to #3207 to address concerns regarding third-party scripts and browser plugins potentially altering DOM nodes within document.body, causing problems with reconciliation. Closes #3211.
Ben Anderson committed
Feb 19, 2015 at 21:39 UTC
75a8bc96b10ef364c751bbc7a0594dbdb7e8663c
2 files changed
+21
src/browser/ui/ReactMount.js
+8
@@ -450,6 +450,14 @@ var ReactMount = {
450
)
451
);
452
453
+ warning(
454
+ container && container.tagName !== 'BODY',
455
+ 'render(): Rendering components directly into document.body is ' +
456
+ 'discouraged, since its children are often manipulated by third-party ' +
457
+ 'scripts and browser extensions. This may lead to subtle reconciliation ' +
458
+ 'issues. Try rendering into a container element created for your app.'
459
+ );
460
+
461
var prevComponent = instancesByReactRootID[getReactRootID(container)];
462
463
if (prevComponent) {
src/browser/ui/__tests__/ReactMount-test.js
+13
@@ -144,4 +144,17 @@ describe('ReactMount', function() {
144
ReactMount.render(<div />, container);
145
expect(console.warn.mock.calls.length).toBe(0);
146
});
147
+
148
+ it('should warn when mounting into document.body', function () {
149
+ var iFrame = document.createElement('iframe');
150
+ document.body.appendChild(iFrame);
151
+ spyOn(console, 'warn');
152
+
153
+ ReactMount.render(<div />, iFrame.contentDocument.body);
154
+
155
+ expect(console.warn.calls.length).toBe(1);
156
+ expect(console.warn.calls[0].args[0]).toContain(
157
+ 'Rendering components directly into document.body is discouraged'
158
+ );
159
+ });
160
});