Do not reset innerHTML for elements with null children This is required to support certain third party scripts as well as other fiber renderers (eg the new ReactART renderer)
Do not reset innerHTML for elements with null children This is required to support certain third party scripts as well as other fiber renderers (eg the new ReactART renderer)
Brian Vaughn committed
Dec 7, 2016 at 12:06 UTC
2533fa8d35c095b5d19571f10c36260d51095a25
3 files changed
+16
-6
scripts/fiber/tests-passing.txt
+1
@@ -602,6 +602,7 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
602
* should update arbitrary attributes for tags containing dashes
603
* should clear all the styles when removing `style`
604
* should update styles when `style` changes from null to object
605
+* should not reset innerHTML for when children is null
606
* should empty element when removing innerHTML
607
* should transition from string content to innerHTML
608
* should transition from innerHTML to string content
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+10
@@ -416,6 +416,16 @@ describe('ReactDOMComponent', () => {
416
expect(stubStyle.color).toEqual('red');
417
});
418
419
+ it('should not reset innerHTML for when children is null', () => {
420
+ var container = document.createElement('div');
421
+ ReactDOM.render(<div></div>, container);
422
+ container.firstChild.innerHTML = 'bonjour';
423
+ expect(container.firstChild.innerHTML).toEqual('bonjour');
424
+
425
+ ReactDOM.render(<div></div>, container);
426
+ expect(container.firstChild.innerHTML).toEqual('bonjour');
427
+ });
428
+
429
it('should empty element when removing innerHTML', () => {
430
var container = document.createElement('div');
431
ReactDOM.render(<div dangerouslySetInnerHTML={{__html: ':)'}} />, container);
src/renderers/shared/fiber/ReactFiberBeginWork.js
+5
-6
@@ -217,18 +217,17 @@ module.exports = function<T, P, I, TI, C>(
217
const prevProps = current ? current.memoizedProps : null;
218
let nextChildren = nextProps.children;
219
const isDirectTextChild = shouldSetTextContent(nextProps);
220
+
221
if (isDirectTextChild) {
222
// We special case a direct text child of a host node. This is a common
223
// case. We won't handle it as a reified child. We will instead handle
224
// this in the host environment that also have access to this prop. That
225
// avoids allocating another HostText fiber and traversing it.
226
nextChildren = null;
226
- } else if (prevProps && (
227
- shouldSetTextContent(prevProps) ||
228
- prevProps.children === null ||
229
- typeof prevProps.children === 'undefined' ||
230
- typeof prevProps.children === 'boolean'
231
- )) {
227
+ } else if (
228
+ prevProps &&
229
+ shouldSetTextContent(prevProps)
230
+ ) {
231
// If we're switching from a direct text child to a normal child, or to
232
// empty, we need to schedule the text content to be reset.
233
workInProgress.effectTag |= ContentReset;