update display names for layout components (#21124)

(cherry picked from commit 286e0e97f8)

components/layout/layout.tsx

@@ -7,6 +7,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 export interface GeneratorProps {
   suffixCls: string;
   tagName: 'header' | 'footer' | 'main' | 'section';
+  displayName: string;
 }
 export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
@@ -30,9 +31,11 @@ interface BasicPropsWithTagName extends BasicProps {
   tagName: 'header' | 'footer' | 'main' | 'section';
 }
 
-function generator({ suffixCls, tagName }: GeneratorProps) {
+function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
   return (BasicComponent: any) => {
     return class Adapter extends React.Component<BasicProps, any> {
+      static displayName: string = displayName;
+
       static Header: any;
 
       static Footer: any;
@@ -108,21 +111,25 @@ const Layout: React.ComponentClass<BasicProps> & {
 } = generator({
   suffixCls: 'layout',
   tagName: 'section',
+  displayName: 'Layout',
 })(BasicLayout);
 
 const Header = generator({
   suffixCls: 'layout-header',
   tagName: 'header',
+  displayName: 'Header',
 })(Basic);
 
 const Footer = generator({
   suffixCls: 'layout-footer',
   tagName: 'footer',
+  displayName: 'Footer',
 })(Basic);
 
 const Content = generator({
   suffixCls: 'layout-content',
   tagName: 'main',
+  displayName: 'Content',
 })(Basic);
 
 Layout.Header = Header;