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

@@ -667,14 +667,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;
+      }
+
+      if (props.dangerouslySetInnerHTML.__html === null) {
+        return false;
+      } else if (
+        typeof props.dangerouslySetInnerHTML.__html === 'object' &&
+        typeof props.dangerouslySetInnerHTML.__html.toString === 'function'
+      ) {
+        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');
+  });
 });