Top-level render only accepts a React element if feature flag is on
Andrew Clark committed
Jan 11, 2017 at 18:08 UTC
397810f844661288b22de4cf645999195993d51e
2 files changed
+23
-9
src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
+14
-9
@@ -1014,20 +1014,25 @@ describe('ReactDOMFiber', () => {
1014
ReactFeatureFlags.disableNewFiberFeatures = false;
1015
});
1016
1017
+ it('throws if non-element passed to top-level render', () => {
1018
+ const message = 'render(): Invalid component element.';
1019
+
1020
+ expect(() => ReactDOM.render(null, container)).toThrow(message, container);
1021
+ expect(() => ReactDOM.render(undefined, container)).toThrow(message, container);
1022
+ expect(() => ReactDOM.render(false, container)).toThrow(message, container);
1023
+ expect(() => ReactDOM.render('Hi', container)).toThrow(message, container);
1024
+ expect(() => ReactDOM.render(999, container)).toThrow(message, container);
1025
+ expect(() => ReactDOM.render([<div />], container)).toThrow(message, container);
1026
+ });
1027
+
1028
it('throws if something other than false, null, or an element is returned from render', () => {
1029
function Render(props) {
1030
return props.children;
1031
}
1032
1022
- const message = (
1023
- 'Warning: Render.render(): A valid React element (or null) must ' +
1024
- 'be returned. You may have returned undefined, an array or some ' +
1025
- 'other invalid object.'
1026
- );
1027
-
1028
- expect(() => ReactDOM.render(<Render>Hi</Render>, container)).toThrow(message);
1029
- expect(() => ReactDOM.render(<Render>{999}</Render>, container)).toThrow(message);
1030
- expect(() => ReactDOM.render(<Render>[<div />]</Render>, container)).toThrow(message);
1033
+ expect(() => ReactDOM.render(<Render>Hi</Render>, container)).toThrow(/Render\.render/);
1034
+ expect(() => ReactDOM.render(<Render>{999}</Render>, container)).toThrow(/Render\.render/);
1035
+ expect(() => ReactDOM.render(<Render>[<div />]</Render>, container)).toThrow(/Render\.render/);
1036
});
1037
});
1038
}
src/renderers/shared/fiber/ReactFiberReconciler.js
+9
@@ -17,6 +17,10 @@ import type { FiberRoot } from 'ReactFiberRoot';
17
import type { PriorityLevel } from 'ReactPriorityLevel';
18
import type { ReactNodeList } from 'ReactTypes';
19
20
+var { isValidElement } = require('ReactElement');
21
+var invariant = require('invariant');
22
+var ReactFeatureFlags = require('ReactFeatureFlags');
23
+
24
var {
25
addTopLevelUpdate,
26
} = require('ReactFiberUpdateQueue');
@@ -134,6 +138,11 @@ module.exports = function<T, P, I, TI, PI, C, CX>(config : HostConfig<T, P, I, T
138
},
139
140
updateContainer(element : ReactNodeList, container : OpaqueNode, parentComponent : ?ReactComponent<any, any, any>, callback: ?Function) : void {
141
+ invariant(
142
+ !ReactFeatureFlags.disableNewFiberFeatures || isValidElement(element),
143
+ 'render(): Invalid component element.'
144
+ );
145
+
146
// TODO: If this is a nested container, this won't be the root.
147
const root : FiberRoot = (container.stateNode : any);
148
const current = root.current;