fix(link): root tag will be replaced span when disabled or loading (#…

…1855)

Co-authored-by: maxin <maxin@growingio.com>

src/link/Link.tsx

@@ -33,7 +33,7 @@ export const Link = React.forwardRef((props, ref) => {
 
   const disabled = disabledProp || loading;
 
-  const Component: React.ElementType = component;
+  const Component: React.ElementType = component === 'a' && disabled ? 'span' : component;
   return (
     <Component
       className={classes}

src/link/demos/Link.stories.tsx

@@ -47,7 +47,7 @@ const Template: Story<LinkProps> = (args) => (
       </tr>
       <tr>
         <td>Disabled</td>
-        <td>disabled状态的样式</td>
+        <td>disabled 状态的样式，如果 `disabled=true`，根标签会替换成 `span`</td>
         <td>
           <Link disabled prefix={<PlusOutlined />} {...args}>
             GrowingIO
@@ -59,7 +59,7 @@ const Template: Story<LinkProps> = (args) => (
       </tr>
       <tr>
         <td>Loading</td>
-        <td>Loading状态的样式</td>
+        <td>Loading 状态的样式，如果 `loading=true`，根标签会替换成 `span`</td>
         <td>
           <Link loading prefix={<PlusOutlined />} {...args}>
             GrowingIO
@@ -79,7 +79,12 @@ Demo.args = {
     margin: '4px 8px',
   },
 };
-const LinkTemplate: Story<LinkProps> = (args) => <Link {...args}>GrowingIO</Link>;
+const LinkTemplate: Story<LinkProps> = (args) => (
+  <>
+    <h4>如果 `disabled` 或 `loading` 为 `true`，则根标签会替换成 `span` 标签</h4>
+    <Link {...args}>GrowingIO</Link>
+  </>
+);
 
 export const Default = LinkTemplate.bind({});
 Default.args = {

src/link/demos/LinkPage.tsx

@@ -21,6 +21,7 @@ export default function LinkPage() {
       </p>
       <p>Upgrading Guide</p>
       <ul>
+        <li>如果 `disabled` 或 `loading` 为 `true`，则根标签会替换成 `span` 标签</li>
         <li>Api变化: 参数icon 更改为 参数 prefix</li>
         <li>样式变化:颜色变化</li>
         <li> 支持原生a标签</li>