Refactor shouldSetTextContent & add tests (#11789)

Author: magicmark

packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js

@@ -197,6 +197,16 @@ describe('ReactDOMTextComponent', () => {
     expect(el.textContent).toBe('');
   });
 
+  it('can reconcile text from pre-rendered markup using dangerouslySetInnerHTML and an object with toString', () => {
+    const HelloObject = {toString: () => 'Hello'};
+    const el = document.createElement('div');
+    let reactEl = <p dangerouslySetInnerHTML={{__html: HelloObject}} />;
+    el.innerHTML = ReactDOMServer.renderToString(reactEl);
+
+    ReactDOM.hydrate(reactEl, el);
+    expect(el.textContent).toBe('Hello');
+  });
+
   xit('can reconcile text arbitrarily split into multiple nodes', () => {
     const el = document.createElement('div');
     let inst = ReactDOM.render(

packages/react-dom/src/client/ReactDOM.js

@@ -659,14 +659,36 @@ const DOMRenderer = ReactFiberReconciler({
   },
 
   shouldSetTextContent(type: string, props: Props): boolean {
-    return (
-      type === 'textarea' ||
+    if (type === 'textarea') {
+      return true;
+    }
+
+    if (
       typeof props.children === 'string' ||
-      typeof props.children === 'number' ||
-      (typeof props.dangerouslySetInnerHTML === 'object' &&
-        props.dangerouslySetInnerHTML !== null &&
-        typeof props.dangerouslySetInnerHTML.__html === 'string')
-    );
+      typeof props.children === 'number'
+    ) {
+      return true;
+    }
+
+    if (
+      typeof props.dangerouslySetInnerHTML === 'object' &&
+      props.dangerouslySetInnerHTML !== null
+    ) {
+      if (typeof props.dangerouslySetInnerHTML.__html === 'string') {
+        return true;
+      }
+
+      // Or allow any type of object through - this is to allow React to render
+      // the `toString` method of objects. (#11792)
+      if (
+        typeof props.dangerouslySetInnerHTML.__html === 'object' &&
+        props.dangerouslySetInnerHTML.__html !== 'null'
+      ) {
+        return true;
+      }
+    }
+
+    return false;
   },
 
   shouldDeprioritizeSubtree(type: string, props: Props): boolean {

packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js

@@ -91,4 +91,14 @@ describe('dangerouslySetInnerHTML', () => {
       expect(circle.tagName).toBe('circle');
     });
   });
+
+  it('when rendering an object with a toString method', () => {
+    const container = document.createElement('div');
+    const HelloObject = {toString: () => 'Hello'};
+    const node = ReactDOM.render(
+      <div dangerouslySetInnerHTML={{__html: HelloObject}} />,
+      container,
+    );
+    expect(node.textContent).toBe('Hello');
+  });
 });

scripts/rollup/results.json

@@ -46,15 +46,15 @@
       "filename": "react-dom.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 626353,
-      "gzip": 144739
+      "size": 626271,
+      "gzip": 144757
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 102821,
-      "gzip": 32649
+      "size": 102811,
+      "gzip": 32643
     },
     {
       "filename": "react-dom.development.js",