diff --git a/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx b/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx index 1710361a..8f29a21a 100644 --- a/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx +++ b/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx @@ -2024,6 +2024,10 @@ function DefineComponent(componentDeclaration) ComponentDefinitions[dotNetTypeOfReactComponent] = NewComponent; NewComponent.displayName = dotNetTypeOfReactComponent.split(',')[0].split('.').pop(); + if (NewComponent.displayName === 'FunctionalComponent') + { + NewComponent.displayName = componentDeclaration[DotNetProperties].Name; + } return NewComponent; } diff --git a/ReactWithDotNet/FC.cs b/ReactWithDotNet/FC.cs index 133699ae..67e66c50 100644 --- a/ReactWithDotNet/FC.cs +++ b/ReactWithDotNet/FC.cs @@ -16,7 +16,7 @@ public interface IFunctionalComponent partial class Mixin { - public static Element FC(Func func) + public static Element FC(Func func, [CallerMemberName] string callerMemberName = null) { if (func == null) { @@ -35,7 +35,10 @@ public static Element FC(Func func) RenderMethodNameWithToken = func.Method.GetNameWithToken(), - CompilerGeneratedType = targeType + CompilerGeneratedType = targeType, + + Name = $"{targeType.DeclaringType?.Name}.{callerMemberName}" + }; } } @@ -43,7 +46,7 @@ public static Element FC(Func func) throw DeveloperException("Invalid usage of Functional component"); } - public static Element FC(Func> func) + public static Element FC(Func> func, [CallerMemberName] string callerMemberName = null) { if (func == null) { @@ -66,7 +69,9 @@ public static Element FC(Func> func) RenderMethodNameWithToken = func.Method.GetNameWithToken(), - CompilerGeneratedType = targeType + CompilerGeneratedType = targeType, + + Name = $"{targeType.DeclaringType?.Name}.{callerMemberName}" }; } } @@ -283,6 +288,8 @@ sealed class FunctionalComponent : Component, IFuncti public string RenderMethodNameWithToken { get; init; } public bool IsAsyncFC { get; init; } + + public required string Name { get; init; } public void InitializeTarget() { diff --git a/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx b/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx index 1710361a..8f29a21a 100644 --- a/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx +++ b/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx @@ -2024,6 +2024,10 @@ function DefineComponent(componentDeclaration) ComponentDefinitions[dotNetTypeOfReactComponent] = NewComponent; NewComponent.displayName = dotNetTypeOfReactComponent.split(',')[0].split('.').pop(); + if (NewComponent.displayName === 'FunctionalComponent') + { + NewComponent.displayName = componentDeclaration[DotNetProperties].Name; + } return NewComponent; }