mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Warn if class has a render() method but doesn't extend React.Component (#11168)
Warn if class has a render() method but doesn't extend React.Component
This commit is contained in:
@@ -326,6 +326,26 @@ describe('ReactCompositeComponent', () => {
|
||||
expect(cbCalled).toBe(false);
|
||||
});
|
||||
|
||||
it('should warn when rendering a class with a render method that does not extend React.Component', () => {
|
||||
spyOn(console, 'error');
|
||||
var container = document.createElement('div');
|
||||
class ClassWithRenderNotExtended {
|
||||
render() {
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
expectDev(console.error.calls.count()).toBe(0);
|
||||
expect(() => {
|
||||
ReactDOM.render(<ClassWithRenderNotExtended />, container);
|
||||
}).toThrow(TypeError);
|
||||
expectDev(console.error.calls.count()).toBe(1);
|
||||
expectDev(console.error.calls.argsFor(0)[0]).toContain(
|
||||
'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
|
||||
"but doesn't extend React.Component. This is likely to cause errors. " +
|
||||
'Change ClassWithRenderNotExtended to extend React.Component instead.',
|
||||
);
|
||||
});
|
||||
|
||||
it('should warn about `setState` in render', () => {
|
||||
spyOn(console, 'error');
|
||||
|
||||
|
||||
@@ -39,6 +39,7 @@ var {
|
||||
} = require('shared/ReactTypeOfSideEffect');
|
||||
var {ReactCurrentOwner} = require('shared/ReactGlobalSharedState');
|
||||
var invariant = require('fbjs/lib/invariant');
|
||||
var getComponentName = require('shared/getComponentName');
|
||||
|
||||
var ReactFiberClassComponent = require('./ReactFiberClassComponent');
|
||||
var {
|
||||
@@ -471,6 +472,16 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(
|
||||
var value;
|
||||
|
||||
if (__DEV__) {
|
||||
if (fn.prototype && typeof fn.prototype.render === 'function') {
|
||||
const componentName = getComponentName(workInProgress);
|
||||
warning(
|
||||
false,
|
||||
"The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
|
||||
'This is likely to cause errors. Change %s to extend React.Component instead.',
|
||||
componentName,
|
||||
componentName,
|
||||
);
|
||||
}
|
||||
ReactCurrentOwner.current = workInProgress;
|
||||
value = fn(props, context);
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user