From 5118d4485fc2b7ee8845ea3e49e320847bdcf5e1 Mon Sep 17 00:00:00 2001 From: zthxxx Date: Wed, 11 Dec 2019 01:21:00 +0800 Subject: [PATCH 1/3] 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` --- .../react-devtools-shared/src/backend/renderer.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 90d7958fbad78..7275fd29f8c86 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -364,8 +364,19 @@ export function getInternalReactConstants( case IndeterminateComponent: return getDisplayName(resolvedType); case ForwardRef: + // maybe set `displayName` after `React.forwardRef()` + // + // ``` + // const Component = React.forwardRef(WrapComponent); + // Component.displayName = 'OtherName' + // ``` + // + // `resolvedType` is `WrapComponent` + // `type` is Component return ( - resolvedType.displayName || getDisplayName(resolvedType, 'Anonymous') + (type && type.displayName) || + resolvedType.displayName || + getDisplayName(resolvedType, 'Anonymous') ); case HostRoot: return null; From d1becea4fb111eb0a2bf05ed5c84d27d5d59f211 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 16 Dec 2019 16:08:04 -0800 Subject: [PATCH 2/3] Removed a little unnecessary/redundant code. --- .../src/backend/renderer.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 7275fd29f8c86..3102ac0f476db 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -364,18 +364,9 @@ export function getInternalReactConstants( case IndeterminateComponent: return getDisplayName(resolvedType); case ForwardRef: - // maybe set `displayName` after `React.forwardRef()` - // - // ``` - // const Component = React.forwardRef(WrapComponent); - // Component.displayName = 'OtherName' - // ``` - // - // `resolvedType` is `WrapComponent` - // `type` is Component + // Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37 return ( (type && type.displayName) || - resolvedType.displayName || getDisplayName(resolvedType, 'Anonymous') ); case HostRoot: @@ -388,11 +379,7 @@ export function getInternalReactConstants( return null; case MemoComponent: case SimpleMemoComponent: - if (elementType.displayName) { - return elementType.displayName; - } else { - return getDisplayName(resolvedType, 'Anonymous'); - } + return getDisplayName(resolvedType, 'Anonymous'); case SuspenseComponent: return 'Suspense'; case SuspenseListComponent: From 6a398bb41cac128ad2f9c57873af0b1c0d32a460 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 16 Dec 2019 16:31:51 -0800 Subject: [PATCH 3/3] Fixed lint error (removed unused var) --- packages/react-devtools-shared/src/backend/renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 3102ac0f476db..f62255579054e 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -347,7 +347,7 @@ export function getInternalReactConstants( // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods function getDisplayNameForFiber(fiber: Fiber): string | null { - const {elementType, type, tag} = fiber; + const {type, tag} = fiber; let resolvedType = type; if (typeof type === 'object' && type !== null) {