fix: condition render in Fragments #942 (#943)

gaearon · Apr 24, 2018 · 2549a18 · 2549a18
1 parent acb6bf1
commit 2549a18
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/reconciler/hotReplacementRender.js b/src/reconciler/hotReplacementRender.js
@@ -215,7 +215,7 @@ const mergeInject = (a, b, instance) => {
 const transformFlowNode = flow =>
   flow.reduce((acc, node) => {
     if (isFragmentNode(node) && node.props && node.props.children) {
-      return [...acc, ...node.props.children]
+      return [...acc, ...filterNullArray(node.props.children)]
     }
     return [...acc, node]
   }, [])

diff --git a/test/AppContainer.dev.test.js b/test/AppContainer.dev.test.js
@@ -1889,7 +1889,10 @@ describe(`AppContainer (dev)`, () => {
 
         const InnerItem = () => (
           <React.Fragment>
+            {false && <div>hole</div>}
             -1-<InnerComponent />
+            {false && <div>hole</div>}
+            -3-<InnerComponent />
           </React.Fragment>
         )
         RHL.register(InnerItem, 'InnerItem', 'test.js')
@@ -1916,7 +1919,9 @@ describe(`AppContainer (dev)`, () => {
           </AppContainer>,
         )
 
-        expect(wrapper.update().text()).toBe('1-1-OldInnerComponent3')
+        expect(wrapper.update().text()).toBe(
+          '1-1-OldInnerComponent-3-OldInnerComponent3',
+        )
         {
           class InnerComponent extends Component {
             componentWillUnmount() {
@@ -1932,15 +1937,20 @@ describe(`AppContainer (dev)`, () => {
 
           const InnerItem = () => (
             <React.Fragment>
+              {false && <div>hole</div>}
               -2-<InnerComponent />
+              {false && <div>hole</div>}
+              -3-<InnerComponent />
             </React.Fragment>
           )
           RHL.register(InnerItem, 'InnerItem', 'test.js')
 
           wrapper.setProps({ children: <App /> })
         }
         expect(unmount).toHaveBeenCalledTimes(0)
-        expect(wrapper.update().text()).toBe('1-2-NewInnerComponent3')
+        expect(wrapper.update().text()).toBe(
+          '1-2-NewInnerComponent-3-NewInnerComponent3',
+        )
       } else {
         // React 15 is always ok
         expect(true).toBe(true)