diff --git a/src/browser/ui/ReactMount.js b/src/browser/ui/ReactMount.js index 8410f8e8dd..8b6edce05a 100644 --- a/src/browser/ui/ReactMount.js +++ b/src/browser/ui/ReactMount.js @@ -450,6 +450,14 @@ var ReactMount = { ) ); + warning( + container && container.tagName !== 'BODY', + 'render(): Rendering components directly into document.body is ' + + 'discouraged, since its children are often manipulated by third-party ' + + 'scripts and browser extensions. This may lead to subtle reconciliation ' + + 'issues. Try rendering into a container element created for your app.' + ); + var prevComponent = instancesByReactRootID[getReactRootID(container)]; if (prevComponent) { diff --git a/src/browser/ui/__tests__/ReactMount-test.js b/src/browser/ui/__tests__/ReactMount-test.js index 5de375dbca..3af0b535aa 100644 --- a/src/browser/ui/__tests__/ReactMount-test.js +++ b/src/browser/ui/__tests__/ReactMount-test.js @@ -144,4 +144,17 @@ describe('ReactMount', function() { ReactMount.render(
, container); expect(console.warn.mock.calls.length).toBe(0); }); + + it('should warn when mounting into document.body', function () { + var iFrame = document.createElement('iframe'); + document.body.appendChild(iFrame); + spyOn(console, 'warn'); + + ReactMount.render(
, iFrame.contentDocument.body); + + expect(console.warn.calls.length).toBe(1); + expect(console.warn.calls[0].args[0]).toContain( + 'Rendering components directly into document.body is discouraged' + ); + }); });