Add warning when using non-component element types

This should make debugging easier for people who missed callsites when fixing up their JSX/non-JSX usage.
This commit is contained in:
Ben Alpert 2015-03-05 15:21:44 -08:00
parent fa8961118a
commit 6b7e4dc8e8
2 changed files with 27 additions and 0 deletions

View File

@ -133,6 +133,20 @@ var ReactCompositeComponentMixin = {
// Initialize the public class
var inst = new Component(publicProps, publicContext);
if (__DEV__) {
// This will throw later in _renderValidatedComponent, but add an early
// warning now to help debugging
warning(
inst.render != null,
'%s(...): No `render` method found on the returned component ' +
'instance: you may have forgotten to define `render` in your ' +
'component or you may have accidentally tried to render an element ' +
'whose type is a function that isn\'t a React component.',
Component.displayName || Component.name || 'Component'
);
}
// These should be set up in the constructor, but as a convenience for
// simpler class abstractions, we set them up after the fact.
inst.props = publicProps;

View File

@ -954,4 +954,17 @@ describe('ReactCompositeComponent', function() {
expect(a).toBe(b);
});
it('should warn when using non-React functions in JSX', function() {
function NotAComponent() {
return [<div />, <div />];
}
expect(function() {
ReactTestUtils.renderIntoDocument(<div><NotAComponent /></div>);
}).toThrow(); // has no method 'render'
expect(console.warn.calls.length).toBe(1);
expect(console.warn.calls[0].args[0]).toContain(
'NotAComponent(...): No `render` method found'
);
});
});