Merge pull request #27485 from ant-design/pageHeader

fix(pageHeader): if title is null,no render title view

components/page-header/__tests__/index.test.js

@@ -50,6 +50,18 @@ describe('PageHeader', () => {
     expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
   });
 
+  it('pageHeader do not has title', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'First-level Menu',
+      },
+    ];
+    const wrapper = mount(<PageHeader breadcrumb={{ routes }}>test</PageHeader>);
+    expect(wrapper.find('.ant-page-header-heading-lef').exists()).toBeFalsy();
+    expect(wrapper.find('.ant-page-header-heading').exists()).toBeFalsy();
+  });
+
   it('pageHeader should no contain back', () => {
     const wrapper = mount(<PageHeader title="Page Title" backIcon={false} />);
     expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);

components/page-header/index.tsx

@@ -69,11 +69,17 @@ const getBackIcon = (props: PageHeaderProps, direction: string = 'ltr') => {
 const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: string = 'ltr') => {
   const { title, avatar, subTitle, tags, extra, onBack } = props;
   const headingPrefixCls = `${prefixCls}-heading`;
-  if (title || subTitle || tags || extra) {
-    const backIcon = getBackIcon(props, direction);
-    const backIconDom = renderBack(prefixCls, backIcon, onBack);
-    return (
-      <div className={headingPrefixCls}>
+  const hasHeading = title || subTitle || tags || extra;
+  // 如果 什么都没有，直接返回一个 null
+  if (!hasHeading) {
+    return null;
+  }
+  const backIcon = getBackIcon(props, direction);
+  const backIconDom = renderBack(prefixCls, backIcon, onBack);
+  const hasTitle = backIconDom || avatar || hasHeading;
+  return (
+    <div className={headingPrefixCls}>
+      {hasTitle && (
         <div className={`${headingPrefixCls}-left`}>
           {backIconDom}
           {avatar && <Avatar {...avatar} />}
@@ -95,11 +101,10 @@ const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: strin
           )}
           {tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
         </div>
-        {extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
-      </div>
-    );
-  }
-  return null;
+      )}
+      {extra && <span className={`${headingPrefixCls}-extra`}>{extra}</span>}
+    </div>
+  );
 };
 
 const renderFooter = (prefixCls: string, footer: React.ReactNode) => {