adds childContextTypes warnings for functional components
ReactStatelessComponent-test.js fails due to warnings not showing up when functional components mount or update. This PR ports the existing warnings from stack and re-applies them to fiber functional components and attempts to re-use some logic in ReactFiberContext that currently exists for showing warnings when dealing with class components.
Dominic Gannaway committed
Feb 22, 2017 at 14:04 UTC
a9325e2ec40d2f16f2f07c0a24f72683c12f79c3
4 files changed
+38
-18
scripts/fiber/tests-passing-except-dev.txt
-3
@@ -139,9 +139,6 @@ src/renderers/__tests__/ReactHostOperationHistoryHook-test.js
139
* gets reported when a child is inserted
140
* gets reported when a child is removed
141
142
-src/renderers/__tests__/ReactStatelessComponent-test.js
143
-* should warn for childContextTypes on a functional component
144
-
142
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
143
* should not warn when server-side rendering `onScroll`
144
* should warn about incorrect casing on properties (ssr)
scripts/fiber/tests-passing.txt
+1
@@ -777,6 +777,7 @@ src/renderers/__tests__/ReactStatelessComponent-test.js
777
* should update stateless component
778
* should unmount stateless component
779
* should pass context thru stateless component
780
+* should warn for childContextTypes on a functional component
781
* should throw when stateless component returns undefined
782
* should throw on string refs in pure functions
783
* should warn when given a string ref
src/renderers/shared/fiber/ReactFiberBeginWork.js
+15
@@ -67,6 +67,9 @@ var invariant = require('invariant');
67
if (__DEV__) {
68
var ReactDebugCurrentFiber = require('ReactDebugCurrentFiber');
69
var warning = require('warning');
70
+ var {
71
+ warnAboutMissingGetChildContext,
72
+ } = require('ReactFiberContext');
73
74
var warnedAboutStatelessRefs = {};
75
}
@@ -479,6 +482,18 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
482
// Proceed under the assumption that this is a functional component
483
workInProgress.tag = FunctionalComponent;
484
if (__DEV__) {
485
+ const Component = workInProgress.type;
486
+
487
+ if (Component) {
488
+ warning(
489
+ !Component.childContextTypes,
490
+ '%s(...): childContextTypes cannot be defined on a functional component.',
491
+ Component.displayName || Component.name || 'Component'
492
+ );
493
+ if (Component.childContextTypes) {
494
+ warnAboutMissingGetChildContext(workInProgress);
495
+ }
496
+ }
497
if (workInProgress.ref !== null) {
498
let info = '';
499
const ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();
src/renderers/shared/fiber/ReactFiberContext.js
+22
-15
@@ -32,9 +32,30 @@ const {
32
push,
33
} = require('ReactFiberStack');
34
35
+var warnAboutMissingGetChildContext;
36
+
37
if (__DEV__) {
38
var checkReactTypeSpec = require('checkReactTypeSpec');
39
var warnedAboutMissingGetChildContext = {};
40
+
41
+ // TODO (bvaughn) Replace this behavior with an invariant() in the future.
42
+ // It has only been added in Fiber to match the (unintentional) behavior in Stack.
43
+ warnAboutMissingGetChildContext = (fiber: Fiber) => {
44
+ const componentName = getComponentName(fiber);
45
+
46
+ if (!warnedAboutMissingGetChildContext[componentName]) {
47
+ warnedAboutMissingGetChildContext[componentName] = true;
48
+ warning(
49
+ false,
50
+ '%s.childContextTypes is specified but there is no getChildContext() method ' +
51
+ 'on the instance. You can either define getChildContext() on %s or remove ' +
52
+ 'childContextTypes from it.',
53
+ componentName,
54
+ componentName,
55
+ );
56
+ }
57
+ };
58
+ module.exports.warnAboutMissingGetChildContext = warnAboutMissingGetChildContext;
59
}
60
61
// A cursor to the current merged context object on the stack.
@@ -144,23 +165,9 @@ function processChildContext(fiber : Fiber, parentContext : Object, isReconcilin
165
const instance = fiber.stateNode;
166
const childContextTypes = fiber.type.childContextTypes;
167
147
- // TODO (bvaughn) Replace this behavior with an invariant() in the future.
148
- // It has only been added in Fiber to match the (unintentional) behavior in Stack.
168
if (typeof instance.getChildContext !== 'function') {
169
if (__DEV__) {
151
- const componentName = getComponentName(fiber);
152
-
153
- if (!warnedAboutMissingGetChildContext[componentName]) {
154
- warnedAboutMissingGetChildContext[componentName] = true;
155
- warning(
156
- false,
157
- '%s.childContextTypes is specified but there is no getChildContext() method ' +
158
- 'on the instance. You can either define getChildContext() on %s or remove ' +
159
- 'childContextTypes from it.',
160
- componentName,
161
- componentName,
162
- );
163
- }
170
+ warnAboutMissingGetChildContext(fiber);
171
}
172
return parentContext;
173
}