[Fiber] Fix to render falsy value as dangerouslySetInnerHTML (#8652)
* [Fiber] Fix to render falsy value as dangerouslySetInnerHTML * Add more cases and rename test for clarity
Toru Kobayashi committed
Jan 12, 2017 at 06:19 UTC
beb5b74c54763fd54fed0bf74e6f70d8523f76da
3 files changed
+45
-7
scripts/fiber/tests-passing.txt
+1
@@ -641,6 +641,7 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
641
* should allow named slot projection on both web components and regular DOM elements
642
* should skip reserved props on web components
643
* should skip dangerouslySetInnerHTML on web components
644
+* should render null and undefined as empty but print other falsy values
645
* should remove attributes
646
* should remove properties
647
* should properly update custom attributes on custom elements
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+4
-7
@@ -398,13 +398,10 @@ function updateDOMProperties(
398
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
399
var nextHtml = nextProp ? nextProp[HTML] : undefined;
400
var lastHtml = lastProp ? lastProp[HTML] : undefined;
401
- if (nextHtml) {
402
- if (lastHtml) {
403
- if (lastHtml !== nextHtml) {
404
- setInnerHTML(domElement, '' + nextHtml);
405
- }
406
- } else {
407
- setInnerHTML(domElement, nextHtml);
401
+ // Intentional use of != to avoid catching zero/false.
402
+ if (nextHtml != null) {
403
+ if (lastHtml !== nextHtml) {
404
+ setInnerHTML(domElement, '' + nextHtml);
405
}
406
} else {
407
// TODO: It might be too late to clear this if we have children
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+40
@@ -300,6 +300,46 @@ describe('ReactDOMComponent', () => {
300
).toBe(false);
301
});
302
303
+ it('should render null and undefined as empty but print other falsy values', () => {
304
+ var container = document.createElement('div');
305
+
306
+ ReactDOM.render(
307
+ <div dangerouslySetInnerHTML={{__html: 'textContent'}} />,
308
+ container
309
+ );
310
+ expect(container.textContent).toEqual('textContent');
311
+
312
+ ReactDOM.render(
313
+ <div dangerouslySetInnerHTML={{__html: 0}} />,
314
+ container
315
+ );
316
+ expect(container.textContent).toEqual('0');
317
+
318
+ ReactDOM.render(
319
+ <div dangerouslySetInnerHTML={{__html: false}} />,
320
+ container
321
+ );
322
+ expect(container.textContent).toEqual('false');
323
+
324
+ ReactDOM.render(
325
+ <div dangerouslySetInnerHTML={{__html: ''}} />,
326
+ container
327
+ );
328
+ expect(container.textContent).toEqual('');
329
+
330
+ ReactDOM.render(
331
+ <div dangerouslySetInnerHTML={{__html: null}} />,
332
+ container
333
+ );
334
+ expect(container.textContent).toEqual('');
335
+
336
+ ReactDOM.render(
337
+ <div dangerouslySetInnerHTML={{__html: undefined}} />,
338
+ container
339
+ );
340
+ expect(container.textContent).toEqual('');
341
+ });
342
+
343
it('should remove attributes', () => {
344
var container = document.createElement('div');
345
ReactDOM.render(<img height="17" />, container);