From 6d2a5df1e67e2330cf6c8848aed7b79ccb248368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Mon, 3 Jun 2019 16:13:15 +0800
Subject: [PATCH] fix: Breadcrumb validateDOMNesting warning (#16929)

* :bug: Fix Breadcrumb validateDOMNesting warning

```
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by Context.Consumer)
    in span (created by Context.Consumer)
    in a (created by Context.Consumer)
    in Trigger (created by Dropdown)
    in Dropdown (created by Context.Consumer)
    in Dropdown (created by Context.Consumer)
    in span (created by Context.Consumer)
    in BreadcrumbItem (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Breadcrumb (created by TestBreadcrumb)
    in TestBreadcrumb
```

* :white_check_mark: update snapshots
---
 components/breadcrumb/BreadcrumbItem.tsx      |   4 +-
 .../__snapshots__/Breadcrumb.test.js.snap     |  63 ++++-----
 .../__tests__/__snapshots__/demo.test.js.snap | 131 +++++++++---------
 components/breadcrumb/demo/overlay.md         |  22 ++-
 4 files changed, 109 insertions(+), 111 deletions(-)

diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 851f92199e..37936f4f81 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -71,10 +71,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
     if (overlay) {
       return (
         <DropDown overlay={overlay} placement="bottomCenter">
-          <a className={`${prefixCls}-overlay-link`}>
+          <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <Icon type="down" />
-          </a>
+          </span>
         </DropDown>
       );
     }
diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
index 1f82c45588..c5cb3931cc 100644
--- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
@@ -71,42 +71,43 @@ exports[`Breadcrumb should render a menu 1`] = `
     </span>
   </span>
   <span>
-    <a
+    <span
       class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
     >
       <span
         class="ant-breadcrumb-link"
-      />
-    </a>
-    <a
-      href="#/index/first"
+      >
+        <a
+          href="#/index/first"
+        >
+          first
+        </a>
+      </span>
+      <i
+        aria-label="icon: down"
+        class="anticon anticon-down"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </i>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
     >
-      first
-    </a>
-  </span>
-  <i
-    aria-label="icon: down"
-    class="anticon anticon-down"
-  >
-    <svg
-      aria-hidden="true"
-      class=""
-      data-icon="down"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-      />
-    </svg>
-  </i>
-  <span
-    class="ant-breadcrumb-separator"
-  >
-    /
+      /
+    </span>
   </span>
   <span>
     <span
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
index ee3c6fbe74..3480ab2f1d 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
@@ -64,89 +64,88 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
-<div>
-  <div
-    class="ant-breadcrumb"
-  >
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        Ant Design
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Ant Design
     </span>
-    <span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      <a
+        href=""
+      >
+        Component
+      </a>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+    >
       <span
         class="ant-breadcrumb-link"
       >
         <a
           href=""
         >
-          Component
+          General
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
+      <i
+        aria-label="icon: down"
+        class="anticon anticon-down"
       >
-        /
-      </span>
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </i>
     </span>
-    <span>
-      <a
-        class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
-      >
-        <span
-          class="ant-breadcrumb-link"
-        />
-      </a>
-      <a
-        href=""
-      >
-        General
-      </a>
-    </span>
-    <i
-      aria-label="icon: down"
-      class="anticon anticon-down"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="down"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-        />
-      </svg>
-    </i>
     <span
       class="ant-breadcrumb-separator"
     >
       /
     </span>
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        Button
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Button
     </span>
-  </div>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
 </div>
 `;
 
diff --git a/components/breadcrumb/demo/overlay.md b/components/breadcrumb/demo/overlay.md
index 0789262d9b..11f839c0e5 100644
--- a/components/breadcrumb/demo/overlay.md
+++ b/components/breadcrumb/demo/overlay.md
@@ -37,18 +37,16 @@ const menu = (
 );
 
 ReactDOM.render(
-  <div>
-    <Breadcrumb>
-      <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
-      <Breadcrumb.Item>
-        <a href="">Component</a>
-      </Breadcrumb.Item>
-      <Breadcrumb.Item overlay={menu}>
-        <a href="">General</a>
-      </Breadcrumb.Item>
-      <Breadcrumb.Item>Button</Breadcrumb.Item>
-    </Breadcrumb>
-  </div>,
+  <Breadcrumb>
+    <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Component</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item overlay={menu}>
+      <a href="">General</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>Button</Breadcrumb.Item>
+  </Breadcrumb>,
   mountNode,
 );
 ```