Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix devtools displaying Anonymous for memo of ref-forwarding components (#17274)

Browse Source 
* [react-is] return correct typeOf value of forwardRef

* [react-devtools-shared] use correct displayName of memo(forwardRef(Component))

* [react-devtools-shared] add resolveFiberType and resolve fiber type of memo recursively

Resolving the fiber type of memo recursively before passing it to getDisplayName
will prevent it from displaying "Anonymous" as displayName for components
wrapped with both memo and forwardRef: memo(forwardRef(Component))

* rework resolveFiberType
This commit is contained in:
Waseem Dahman
2019-11-05 14:08:01 -08:00
committed by Brian Vaughn
parent 053cf0fedc
commit 4f02c93c7c
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-devtools-shared/src/backend/renderer.js
Vendored
+27 -8
View File
@@ -324,19 +324,39 @@ export function getInternalReactConstants(
PROFILER_SYMBOL_STRING,
SCOPE_NUMBER,
SCOPE_SYMBOL_STRING,
FORWARD_REF_NUMBER,
FORWARD_REF_SYMBOL_STRING,
MEMO_NUMBER,
MEMO_SYMBOL_STRING,
} = ReactSymbols;
function resolveFiberType(type: any) {
// This is to support lazy components with a Promise as the type.
// see https://github.com/facebook/react/pull/13397
if (typeof type.then === 'function') {
return type._reactResult;
}
const typeSymbol = getTypeSymbol(type);
switch (typeSymbol) {
case MEMO_NUMBER:
case MEMO_SYMBOL_STRING:
// recursively resolving memo type in case of memo(forwardRef(Component))
return resolveFiberType(type.type);
case FORWARD_REF_NUMBER:
case FORWARD_REF_SYMBOL_STRING:
return type.render;
default:
return type;
}
}
// NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
function getDisplayNameForFiber(fiber: Fiber): string | null {
const {elementType, type, tag} = fiber;
// This is to support lazy components with a Promise as the type.
// see https://github.com/facebook/react/pull/13397
let resolvedType = type;
if (typeof type === 'object' && type !== null) {
if (typeof type.then === 'function') {
resolvedType = type._reactResult;
}
resolvedType = resolveFiberType(type);
}
let resolvedContext: any = null;
@@ -350,8 +370,7 @@ export function getInternalReactConstants(
return getDisplayName(resolvedType);
case ForwardRef:
return (
resolvedType.displayName ||
getDisplayName(resolvedType.render, 'Anonymous')
resolvedType.displayName || getDisplayName(resolvedType, 'Anonymous')
);
case HostRoot:
return null;
@@ -366,7 +385,7 @@ export function getInternalReactConstants(
if (elementType.displayName) {
return elementType.displayName;
} else {
return getDisplayName(type, 'Anonymous');
return getDisplayName(resolvedType, 'Anonymous');
}
case SuspenseComponent:
return 'Suspense';