Return empty static markup for null components (#9907)
Dan Abramov committed
Jun 9, 2017 at 16:32 UTC
2d9d4f6349b4d1e718151675129499bd207a1acd
3 files changed
+19
scripts/fiber/tests-passing.txt
+1
@@ -1331,6 +1331,7 @@ src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
1331
* should throw with silly args
1332
* should not put checksum and React ID on components
1333
* should not put checksum and React ID on text components
1334
+* should not use comments for empty nodes
1335
* should only execute certain lifecycle methods
1336
* should throw with silly args
1337
* allows setState in componentWillMount without using DOM
src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
+12
@@ -337,6 +337,18 @@ describe('ReactDOMServer', () => {
337
expect(response).toBe('<span>hello world</span>');
338
});
339
340
+ it('should not use comments for empty nodes', () => {
341
+ class TestComponent extends React.Component {
342
+ render() {
343
+ return null;
344
+ }
345
+ }
346
+
347
+ var response = ReactDOMServer.renderToStaticMarkup(<TestComponent />);
348
+
349
+ expect(response).toBe('');
350
+ });
351
+
352
it('should only execute certain lifecycle methods', () => {
353
function runTest() {
354
var lifecycle = [];
src/renderers/shared/server/ReactServerRenderer.js
+6
@@ -390,6 +390,12 @@ class ReactDOMServerRenderer {
390
} else {
391
({child, context} = resolve(child, context));
392
if (child === null || child === false) {
393
+ if (this.makeStaticMarkup) {
394
+ // Normally we'd insert a comment node, but since this is a situation
395
+ // where React won't take over (static pages), we can simply return
396
+ // nothing.
397
+ return '';
398
+ }
399
return '<!-- react-empty: ' + this.idCounter++ + ' -->';
400
} else {
401
return this.renderDOM(child, context);