Check document.documentMode once

This commit is contained in:
Dan Abramov
2018-09-04 14:25:48 +01:00
parent 52633c84e2
commit d6b59e3d26
2 changed files with 16 additions and 9 deletions

View File

@@ -283,6 +283,10 @@ describe('ReactDOMServerHydration', () => {
it('should not warn when the style property differs on whitespace or order in IE', () => {
document.documentMode = 11;
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
try {
const element = document.createElement('div');

View File

@@ -67,6 +67,7 @@ let warnForTextDifference;
let warnForPropDifference;
let warnForExtraAttributes;
let warnForInvalidEventListener;
let canDiffStyleForHydrationWarning;
let normalizeMarkupForTextOrAttribute;
let normalizeHTML;
@@ -94,6 +95,16 @@ if (__DEV__) {
validateUnknownProperties(type, props, /* canUseEventSystem */ true);
};
// IE 11 parses & normalizes the style attribute as opposed to other
// browsers. It adds spaces and sorts the properties in some
// non-alphabetical order. Handling that would require sorting CSS
// properties in the client & server versions or applying
// `expectedStyle` to a temporary DOM node to read its `style` attribute
// normalized. Since it only affects IE, we're skipping style warnings
// in that browser completely in favor of doing all that work.
// See https://github.com/facebook/react/issues/11807
canDiffStyleForHydrationWarning = !document.documentMode;
// HTML parsing normalizes CR and CRLF to LF.
// It also can turn \u0000 into \uFFFD inside attributes.
// https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
@@ -1000,15 +1011,7 @@ export function diffHydratedProperties(
// $FlowFixMe - Should be inferred as not undefined.
extraAttributeNames.delete(propKey);
// IE 11 parses & normalizes the style attribute as opposed to other
// browsers. It adds spaces and sorts the properties in some
// non-alphabetical order. Handling that would require sorting CSS
// properties in the client & server versions or applying
// `expectedStyle` to a temporary DOM node to read its `style` attribute
// normalized. Since it only affects IE, we're skipping style warnings
// in that browser completely in favor of doing all that work.
// See https://github.com/facebook/react/issues/11807
if (!document.documentMode) {
if (canDiffStyleForHydrationWarning) {
const expectedStyle = CSSPropertyOperations.createDangerousStringForStyles(
nextProp,
);