Mention forwardRef() in <Fn ref={...} /> errors and warnings (#14644)
Dan Abramov committed
Jan 21, 2019 at 16:01 UTC
baa6d40fc856c65e1d74ddf4fa038d7a65a787ed
5 files changed
+19
-7
packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+9
-3
@@ -192,7 +192,9 @@ describe('ReactFunctionComponent', () => {
192
ReactTestUtils.renderIntoDocument(<ParentUsingStringRef />),
193
).toWarnDev(
194
'Warning: Function components cannot be given refs. ' +
195
- 'Attempts to access this ref will fail.\n\nCheck the render method ' +
195
+ 'Attempts to access this ref will fail. ' +
196
+ 'Did you mean to use React.forwardRef()?\n\n' +
197
+ 'Check the render method ' +
198
'of `ParentUsingStringRef`.\n' +
199
' in FunctionComponent (at **)\n' +
200
' in div (at **)\n' +
@@ -228,7 +230,9 @@ describe('ReactFunctionComponent', () => {
230
ReactTestUtils.renderIntoDocument(<ParentUsingFunctionRef />),
231
).toWarnDev(
232
'Warning: Function components cannot be given refs. ' +
231
- 'Attempts to access this ref will fail.\n\nCheck the render method ' +
233
+ 'Attempts to access this ref will fail. ' +
234
+ 'Did you mean to use React.forwardRef()?\n\n' +
235
+ 'Check the render method ' +
236
'of `ParentUsingFunctionRef`.\n' +
237
' in FunctionComponent (at **)\n' +
238
' in div (at **)\n' +
@@ -332,7 +336,9 @@ describe('ReactFunctionComponent', () => {
336
337
expect(() => ReactTestUtils.renderIntoDocument(<Parent />)).toWarnDev(
338
'Warning: Function components cannot be given refs. ' +
335
- 'Attempts to access this ref will fail.\n\nCheck the render method ' +
339
+ 'Attempts to access this ref will fail. ' +
340
+ 'Did you mean to use React.forwardRef()?\n\n' +
341
+ 'Check the render method ' +
342
'of `Parent`.\n' +
343
' in Child (at **)\n' +
344
' in Parent (at **)',
packages/react-reconciler/src/ReactChildFiber.js
+2
-1
@@ -138,7 +138,8 @@ function coerceRef(
138
const ownerFiber = ((owner: any): Fiber);
139
invariant(
140
ownerFiber.tag === ClassComponent,
141
- 'Function components cannot have refs.',
141
+ 'Function components cannot have refs. ' +
142
+ 'Did you mean to use React.forwardRef()?',
143
);
144
inst = ownerFiber.stateNode;
145
}
packages/react-reconciler/src/ReactFiberBeginWork.js
+2
-1
@@ -1293,7 +1293,8 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1293
warning(
1294
false,
1295
'Function components cannot be given refs. ' +
1296
- 'Attempts to access this ref will fail.%s',
1296
+ 'Attempts to access this ref will fail. ' +
1297
+ 'Did you mean to use React.forwardRef()?%s',
1298
info,
1299
);
1300
}
packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js
+3
-1
@@ -1202,7 +1202,9 @@ describe('ReactIncrementalSideEffects', () => {
1202
ReactNoop.render(<Foo show={true} />);
1203
expect(ReactNoop.flush).toWarnDev(
1204
'Warning: Function components cannot be given refs. ' +
1205
- 'Attempts to access this ref will fail.\n\nCheck the render method ' +
1205
+ 'Attempts to access this ref will fail. ' +
1206
+ 'Did you mean to use React.forwardRef()?\n\n' +
1207
+ 'Check the render method ' +
1208
'of `Foo`.\n' +
1209
' in FunctionComponent (at **)\n' +
1210
' in div (at **)\n' +
packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
+3
-1
@@ -282,7 +282,9 @@ describe('ReactTestRenderer', () => {
282
ReactTestRenderer.create(<Baz />);
283
expect(() => ReactTestRenderer.create(<Foo />)).toWarnDev(
284
'Warning: Function components cannot be given refs. Attempts ' +
285
- 'to access this ref will fail.\n\nCheck the render method of `Foo`.\n' +
285
+ 'to access this ref will fail. ' +
286
+ 'Did you mean to use React.forwardRef()?\n\n' +
287
+ 'Check the render method of `Foo`.\n' +
288
' in Bar (at **)\n' +
289
' in Foo (at **)',
290
);