Warn if mounting into node with dirty rendered markup
This commit is contained in:
parent
bab59cd090
commit
c460ad660b
|
@ -206,11 +206,11 @@ describe('ReactServerRendering', function() {
|
|||
<TestComponent name="x" />
|
||||
);
|
||||
ExecutionEnvironment.canUseDOM = true;
|
||||
element.innerHTML = lastMarkup + ' __sentinel__';
|
||||
element.innerHTML = lastMarkup;
|
||||
|
||||
React.render(<TestComponent name="x" />, element);
|
||||
expect(mountCount).toEqual(3);
|
||||
expect(element.innerHTML.indexOf('__sentinel__') > -1).toBe(true);
|
||||
expect(element.innerHTML).toBe(lastMarkup);
|
||||
React.unmountComponentAtNode(element);
|
||||
expect(element.innerHTML).toEqual('');
|
||||
|
||||
|
|
|
@ -468,6 +468,24 @@ var ReactMount = {
|
|||
var containerHasReactMarkup =
|
||||
reactRootElement && ReactMount.isRenderedByReact(reactRootElement);
|
||||
|
||||
if (__DEV__) {
|
||||
if (!containerHasReactMarkup || reactRootElement.nextSibling) {
|
||||
var rootElementSibling = reactRootElement;
|
||||
while (rootElementSibling) {
|
||||
if (ReactMount.isRenderedByReact(rootElementSibling)) {
|
||||
console.warn(
|
||||
'render(): Target node has markup rendered by React, but there ' +
|
||||
'are unrelated nodes as well. This is most commonly caused by ' +
|
||||
'white-space inserted around server-rendered markup.'
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
rootElementSibling = rootElementSibling.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var shouldReuseMarkup = containerHasReactMarkup && !prevComponent;
|
||||
|
||||
var component = ReactMount._renderNewRootComponent(
|
||||
|
|
|
@ -120,4 +120,28 @@ describe('ReactMount', function() {
|
|||
|
||||
expect(instance1 === instance2).toBe(true);
|
||||
});
|
||||
|
||||
it('should warn if mounting into dirty rendered markup', function() {
|
||||
var container = document.createElement('container');
|
||||
container.innerHTML = React.renderToString(<div />) + ' ';
|
||||
|
||||
console.warn = mocks.getMockFunction();
|
||||
ReactMount.render(<div />, container);
|
||||
expect(console.warn.mock.calls.length).toBe(1);
|
||||
|
||||
container.innerHTML = ' ' + React.renderToString(<div />);
|
||||
|
||||
console.warn = mocks.getMockFunction();
|
||||
ReactMount.render(<div />, container);
|
||||
expect(console.warn.mock.calls.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should not warn if mounting into non-empty node', function() {
|
||||
var container = document.createElement('container');
|
||||
container.innerHTML = '<div></div>';
|
||||
|
||||
console.warn = mocks.getMockFunction();
|
||||
ReactMount.render(<div />, container);
|
||||
expect(console.warn.mock.calls.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue