fix(dev-tools): fix show correct displayName with forwardRef in Dev Tools (#17613)
* fix(dev-tools): fix show correct displayName with forwardRef in Dev Tools allow set `displayName` after `React.forwardRef()`, makesure Dev Tools show displayName as same as `getWrappedName` in `shared/getComponentName.js` * Removed a little unnecessary/redundant code. * Fixed lint error (removed unused var)
zthxxx committed
Dec 18, 2019 at 03:29 UTC
24dbe851e8a3a3a5233654183fd80b0d64b99295
1 file changed
+5
-7
packages/react-devtools-shared/src/backend/renderer.js
+5
-7
@@ -347,7 +347,7 @@ export function getInternalReactConstants(
347
348
// NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
349
function getDisplayNameForFiber(fiber: Fiber): string | null {
350
- const {elementType, type, tag} = fiber;
350
+ const {type, tag} = fiber;
351
352
let resolvedType = type;
353
if (typeof type === 'object' && type !== null) {
@@ -364,8 +364,10 @@ export function getInternalReactConstants(
364
case IndeterminateComponent:
365
return getDisplayName(resolvedType);
366
case ForwardRef:
367
+ // Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
368
return (
368
- resolvedType.displayName || getDisplayName(resolvedType, 'Anonymous')
369
+ (type && type.displayName) ||
370
+ getDisplayName(resolvedType, 'Anonymous')
371
);
372
case HostRoot:
373
return null;
@@ -377,11 +379,7 @@ export function getInternalReactConstants(
379
return null;
380
case MemoComponent:
381
case SimpleMemoComponent:
380
- if (elementType.displayName) {
381
- return elementType.displayName;
382
- } else {
383
- return getDisplayName(resolvedType, 'Anonymous');
384
- }
382
+ return getDisplayName(resolvedType, 'Anonymous');
383
case SuspenseComponent:
384
return 'Suspense';
385
case SuspenseListComponent: