docs: unify component export file as index.tsx (#50013)

* docs: unify component export file as index.tsx * docs: compatible with old anchors * chore: clean * test: update snapshot * fix: window env --------- Co-authored-by: Peach <scdzwyxst@gmail.com>
2024-11-24 02:59:58 +08:00 · 2024-07-23 22:22:24 +08:00 · 2024-07-23 22:22:24 +08:00 · 38cf5e8a75
commit 38cf5e8a75
parent f6e9f8540c
89 changed files with 176 additions and 166 deletions
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -357,9 +357,9 @@ const GlobalDemoStyles: React.FC = () => {
        }

        ${antCls}-row-rtl {
-          #components-tooltip-demo-placement,
-          #components-popover-demo-placement,
-          #components-popconfirm-demo-placement {
+          #tooltip-demo-placement,
+          #popover-demo-placement,
+          #popconfirm-demo-placement {
            .code-box-demo {
              direction: ltr;
            }
--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.dumi/theme/common/styles/Markdown.tsx
@ -389,7 +389,7 @@ const GlobalStyle: React.FC = () => {
        }

        .grid-demo,
-        [id^='components-grid-demo-'] {
+        [id^='grid-demo-'] {
          ${antCls}-row > div,
            .code-box-demo ${antCls}-row > div {
            min-height: 30px;
@ -467,8 +467,8 @@ const GlobalStyle: React.FC = () => {
          }
        }

-        [id='components-grid-demo-playground'],
-        [id='components-grid-demo-gutter'] {
+        [id='grid-demo-playground'],
+        [id='grid-demo-gutter'] {
          > .code-box-demo ${antCls}-row > div {
            margin-top: 0;
            margin-bottom: 0;
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@ -35,6 +35,16 @@ export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER';
 //   (global as any).styleCache = styleCache;
 // }

+// Compatible with old anchors
+if (typeof window !== 'undefined') {
+  const hashId = location.hash.slice(1);
+  if (hashId.startsWith('components-')) {
+    if (!document.querySelector(`#${hashId}`)) {
+      location.hash = `#${hashId.replace(/^components-/, '')}`;
+    }
+  }
+}
+
 const getAlgorithm = (themes: ThemeName[] = []) =>
  themes
    .map((theme) => {
--- a/components/alert/design/behavior-pattern.tsx
+++ b/components/alert/design/behavior-pattern.tsx
@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
            {
              id: '707000085',
              label: '了解提示内容',
-              link: 'components-alert-index-tab-design-demo-content',
+              link: 'alert-index-tab-design-demo-content',
            },
            {
              id: '707000086',
              label: '了解提示类型',
-              link: 'components-alert-index-tab-design-demo-type',
+              link: 'alert-index-tab-design-demo-type',
            },
          ],
        },
@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => (
          id: '200000005',
          label: '针对提示进行操作',
          targetType: 'extension',
-          link: 'components-alert-index-tab-design-demo-action',
+          link: 'alert-index-tab-design-demo-action',
        },
      ],
    }}
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
--- a/components/anchor/tests/Anchor.test.tsx
+++ b/components/anchor/tests/Anchor.test.tsx
@ -67,12 +67,12 @@ describe('Anchor Render', () => {
        items={[
          {
            key: '1',
-            href: '#components-anchor-demo-basic',
+            href: '#anchor-demo-basic',
            title: 'Item Basic Demo',
          },
          {
            key: '2',
-            href: '#components-anchor-demo-static',
+            href: '#anchor-demo-static',
            title: 'Static demo',
          },
          {
@ -101,8 +101,8 @@ describe('Anchor Render', () => {
    const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
      (n as HTMLElement).querySelector('.ant-anchor-link-title'),
    );
-    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic');
-    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static');
+    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
+    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
    expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
    expect(
      (
@ -127,12 +127,12 @@ describe('Anchor Render', () => {
        items={[
          {
            key: '1',
-            href: '#components-anchor-demo-basic',
+            href: '#anchor-demo-basic',
            title: 'Item Basic Demo',
          },
          {
            key: '2',
-            href: '#components-anchor-demo-static',
+            href: '#anchor-demo-static',
            title: 'Static demo',
          },
          {
@ -147,8 +147,8 @@ describe('Anchor Render', () => {
    const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
      (n as HTMLElement).querySelector('.ant-anchor-link-title'),
    );
-    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic');
-    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static');
+    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
+    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
    expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
    expect(asFragment().firstChild).toMatchSnapshot();
  });
@ -159,7 +159,7 @@ describe('Anchor Render', () => {
        items={[
          {
            key: '1',
-            href: '#components-anchor-demo-basic',
+            href: '#anchor-demo-basic',
            title: 'Item Basic Demo',
          },
        ]}
@ -170,7 +170,7 @@ describe('Anchor Render', () => {
    expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(1);
    expect(
      (container.querySelector('.ant-anchor .ant-anchor-link-title') as HTMLAnchorElement).href,
-    ).toContain('#components-anchor-demo-basic');
+    ).toContain('#anchor-demo-basic');
    expect(asFragment().firstChild).toMatchSnapshot();
  });

@ -694,12 +694,12 @@ describe('Anchor Render', () => {
          items={[
            {
              key: '1',
-              href: '#components-anchor-demo-basic',
+              href: '#anchor-demo-basic',
              title: 'Item Basic Demo',
            },
            {
              key: '2',
-              href: '#components-anchor-demo-static',
+              href: '#anchor-demo-static',
              title: 'Static demo',
            },
            {
@ -725,12 +725,12 @@ describe('Anchor Render', () => {
          items={[
            {
              key: '1',
-              href: '#components-anchor-demo-basic',
+              href: '#anchor-demo-basic',
              title: 'Item Basic Demo',
            },
            {
              key: '2',
-              href: '#components-anchor-demo-static',
+              href: '#anchor-demo-static',
              title: 'Static demo',
            },
            {
@ -759,8 +759,8 @@ describe('Anchor Render', () => {
    it('nested children via jsx should be filtered out when direction is horizontal', () => {
      const { container } = render(
        <Anchor direction="horizontal">
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
          <Link href="#api" title="API">
            <Link href="#anchor-props" title="Anchor Props" />
            <Link href="#link-props" title="Link Props" />
@ -904,12 +904,12 @@ describe('Anchor Render', () => {
          items={[
            {
              key: '1',
-              href: '#components-anchor-demo-basic',
+              href: '#anchor-demo-basic',
              title: 'Item Basic Demo',
            },
            {
              key: '2',
-              href: '#components-anchor-demo-static',
+              href: '#anchor-demo-static',
              title: 'Static demo',
            },
            {
@ -935,8 +935,8 @@ describe('Anchor Render', () => {
    it('deprecated jsx style', () => {
      render(
        <Anchor direction="horizontal">
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
        </Anchor>,
      );
      expect(errSpy).toHaveBeenCalledWith(
@ -947,8 +947,8 @@ describe('Anchor Render', () => {
    it('deprecated jsx style for direction#vertical', () => {
      render(
        <Anchor>
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
        </Anchor>,
      );
      expect(errSpy).toHaveBeenCalledWith(
--- a/components/anchor/tests/snapshots/Anchor.test.tsx.snap
+++ b/components/anchor/tests/snapshots/Anchor.test.tsx.snap
@ -20,7 +20,7 @@ exports[`Anchor Render render items and ignore jsx children 1`] = `
        >
          <a
            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
            title="Item Basic Demo"
          >
            Item Basic Demo
@ -52,7 +52,7 @@ exports[`Anchor Render renders items correctly 1`] = `
        >
          <a
            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
            title="Item Basic Demo"
          >
            Item Basic Demo
@ -63,7 +63,7 @@ exports[`Anchor Render renders items correctly 1`] = `
        >
          <a
            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
+            href="#anchor-demo-static"
            title="Static demo"
          >
            Static demo
@ -128,7 +128,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
        >
          <a
            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
            title="Item Basic Demo"
          >
            Item Basic Demo
@ -139,7 +139,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
        >
          <a
            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
+            href="#anchor-demo-static"
            title="Static demo"
          >
            Static demo
--- a/components/anchor/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/anchor/tests/snapshots/demo-extend.test.ts.snap
@ -179,7 +179,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -190,7 +190,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
    >
      <a
        class="ant-anchor-link-title ant-anchor-link-title-active"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -328,7 +328,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -339,7 +339,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -404,7 +404,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -415,7 +415,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -476,7 +476,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -487,7 +487,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -629,7 +629,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -640,7 +640,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
--- a/components/anchor/tests/snapshots/demo.test.tsx.snap
+++ b/components/anchor/tests/snapshots/demo.test.tsx.snap
@ -172,7 +172,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -183,7 +183,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -316,7 +316,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -327,7 +327,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -386,7 +386,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -397,7 +397,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -456,7 +456,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -467,7 +467,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
@ -604,7 +604,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
        title="Basic demo"
      >
        Basic demo
@ -615,7 +615,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
        title="Static demo"
      >
        Static demo
--- a/components/anchor/demo/customizeHighlight.tsx
+++ b/components/anchor/demo/customizeHighlight.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { Anchor } from 'antd';

-const getCurrentAnchor = () => '#components-anchor-demo-static';
+const getCurrentAnchor = () => '#anchor-demo-static';

 const App: React.FC = () => (
  <Anchor
@ -10,12 +10,12 @@ const App: React.FC = () => (
    items={[
      {
        key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
--- a/components/anchor/demo/legacy-anchor.tsx
+++ b/components/anchor/demo/legacy-anchor.tsx
@ -5,8 +5,8 @@ const { Link } = Anchor;

 const App: React.FC = () => (
  <Anchor affix={false}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
+    <Link href="#anchor-demo-basic" title="Basic demo" />
+    <Link href="#anchor-demo-static" title="Static demo" />
    <Link href="#api" title="API">
      <Link href="#anchor-props" title="Anchor Props" />
      <Link href="#link-props" title="Link Props" />
--- a/components/anchor/demo/onChange.tsx
+++ b/components/anchor/demo/onChange.tsx
@ -12,12 +12,12 @@ const App: React.FC = () => (
    items={[
      {
        key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
--- a/components/anchor/demo/onClick.tsx
+++ b/components/anchor/demo/onClick.tsx
@ -19,12 +19,12 @@ const App: React.FC = () => (
    items={[
      {
        key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
--- a/components/anchor/demo/static.tsx
+++ b/components/anchor/demo/static.tsx
@ -7,12 +7,12 @@ const App: React.FC = () => (
    items={[
      {
        key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -46,7 +46,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - |  |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false |  |
-| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number | - |  |
+| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#anchor-demo-targetoffset) | number | - |  |
 | onChange | Listening for anchor link change | (currentActiveLink: string) => void |  |  |
 | onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - |  |
 | items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 5.1.0 |
--- a/components/anchor/index.tsx
+++ b/components/anchor/index.tsx
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -47,7 +47,7 @@ group:
 | getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false |  |
-| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number | - |  |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#anchor-demo-targetoffset) | number | - |  |
 | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - |  |
 | onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - |  |
 | items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 5.1.0 |
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
--- a/components/breadcrumb/design/behavior-pattern.tsx
+++ b/components/breadcrumb/design/behavior-pattern.tsx
@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
            {
              id: '707000085',
              label: '了解当前页面的位置',
-              link: 'components-breadcrumb-index-tab-design-demo-basic',
+              link: 'breadcrumb-index-tab-design-demo-basic',
            },
            {
              id: '707000086',
              label: '了解系统层级结构',
-              link: 'components-breadcrumb-index-tab-design-demo-basic',
+              link: 'breadcrumb-index-tab-design-demo-basic',
            },
          ],
        },
@ -29,13 +29,13 @@ const BehaviorPattern: React.FC = () => (
          id: '200000005',
          label: '向上导航',
          targetType: 'mvp',
-          link: 'components-breadcrumb-index-tab-design-demo-basic',
+          link: 'breadcrumb-index-tab-design-demo-basic',
        },
        {
          id: '200000006',
          label: '快捷导航',
          targetType: 'extension',
-          link: 'components-breadcrumb-index-tab-design-demo-overlay',
+          link: 'breadcrumb-index-tab-design-demo-overlay',
        },
      ],
    }}
--- a/components/breadcrumb/index.tsx
+++ b/components/breadcrumb/index.tsx
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@ -1,7 +1,7 @@
 ## zh-CN

-按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#components-dropdown-demo-dropdown-button) 中组合使用。
+按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#dropdown-demo-dropdown-button) 中组合使用。

 ## en-US

-If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
+If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#dropdown-demo-dropdown-button).
--- a/components/button/index.tsx
+++ b/components/button/index.tsx
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
--- a/components/checkbox/index.tsx
+++ b/components/checkbox/index.tsx
--- a/components/col/index.tsx
+++ b/components/col/index.tsx
--- a/components/collapse/demo/collapsible.md
+++ b/components/collapse/demo/collapsible.md
@ -7,7 +7,7 @@
 Specify the trigger area of collapsible by `collapsible`.

 <style>
-#components-collapse-demo-collapsible .ant-space {
+#collapse-demo-collapsible .ant-space {
  width: 100%;
 }
 </style>
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -79,7 +79,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | accordion | If true, Collapse renders as Accordion | boolean | false |  |
-| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#components-collapse-demo-accordion), it's the key of the first panel |  |
+| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#collapse-demo-accordion), it's the key of the first panel |  |
 | bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
 | collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
--- a/components/collapse/index.tsx
+++ b/components/collapse/index.tsx
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -80,7 +80,7 @@ const items: CollapseProps['items'] = [
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | accordion | 手风琴模式 | boolean | false |  |
-| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | [手风琴模式](#components-collapse-demo-accordion)下默认第一个元素 |  |
+| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | [手风琴模式](#collapse-demo-accordion)下默认第一个元素 |  |
 | bordered | 带边框风格的折叠面板 | boolean | true |  |
 | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |
--- a/components/color-picker/index.tsx
+++ b/components/color-picker/index.tsx
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -55,7 +55,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
-| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| direction | Set direction of layout. See [demo](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
 | iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 |
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -56,7 +56,7 @@ export default Demo;
 | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
-| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| direction | 设置文本展示方向。 [示例](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
 | iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
--- a/components/date-picker/design/behavior-pattern.tsx
+++ b/components/date-picker/design/behavior-pattern.tsx
@ -16,32 +16,32 @@ const BehaviorPattern: React.FC = () => (
            {
              id: '707000085',
              label: '选择某天',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-date',
            },
            {
              id: '707000086',
              label: '选择某周',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-week',
            },
            {
              id: '707000087',
              label: '选择某月',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-month',
            },
            {
              id: '707000088',
              label: '选择某季度',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter',
            },
            {
              id: '707000089',
              label: '选择某年',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-year',
            },
            {
              id: '707000090',
              label: '选择某时间',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-time',
            },
          ],
        },
@ -53,32 +53,32 @@ const BehaviorPattern: React.FC = () => (
            {
              id: '7070000851',
              label: '选择某天至某天',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-date-range',
            },
            {
              id: '7070000861',
              label: '选择某周至某周',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-week-range',
            },
            {
              id: '7070000871',
              label: '选择某月至某月',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-month-range',
            },
            {
              id: '7070000881',
              label: '选择某季度至某季度',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
            },
            {
              id: '7070000891',
              label: '选择某年至某年',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-year-range',
            },
            {
              id: '7070000901',
              label: '选择某时间至某时间',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-time-range',
            },
          ],
        },
@ -90,12 +90,12 @@ const BehaviorPattern: React.FC = () => (
            {
              id: '70700008912',
              label: '快捷选择时间点',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-time',
+              link: 'date-picker-index-tab-design-zh-cn-demo-preset-time',
            },
            {
              id: '70700009012',
              label: '快捷选择时间段',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-preset-range',
            },
          ],
        },
@ -103,7 +103,7 @@ const BehaviorPattern: React.FC = () => (
          id: '200000007',
          label: '查看日期附属信息',
          targetType: 'extension',
-          link: 'components-date-picker-index-tab-design-zh-cn-demo-date-extra-info',
+          link: 'date-picker-index-tab-design-zh-cn-demo-date-extra-info',
        },
      ],
    }}
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -99,7 +99,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | components | Custom panels | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 |
-| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
+| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
 | order | Auto order date when multiple or range selection | boolean | true | 5.14.0 |
 | popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 |
 | preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | 5.14.0 |
@ -149,7 +149,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | showNow | Show the fast access of current datetime | boolean | - | 4.4.0 |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) |  |
-| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
+| showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
 | showWeek | Show week info when in DatePicker | boolean | false | 5.14.0 |
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
@ -220,7 +220,7 @@ Added in `4.1.0`.
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) |  |
-| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
+| showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
 | value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |
--- a/components/date-picker/index.tsx
+++ b/components/date-picker/index.tsx
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -100,7 +100,7 @@ dayjs.locale('zh-cn');
 | components | 自定义面板 | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
 | order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
 | preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
 | popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
@ -150,7 +150,7 @@ dayjs.locale('zh-cn');
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | showNow | 显示当前日期时间的快捷选择 | boolean | - |  |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#api) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
 | showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
 | value | 日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - |  |
@ -221,7 +221,7 @@ dayjs.locale('zh-cn');
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#api) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
 | value | 日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |
--- a/components/dropdown/index.tsx
+++ b/components/dropdown/index.tsx
--- a/components/float-button/index.tsx
+++ b/components/float-button/index.tsx
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -69,7 +69,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true |  |
 | disabled | Set form component disable, only available for antd components | boolean | false | 4.21.0 |
 | component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form |  |
-| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
+| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
 | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#forminstance) | - |  |
 | feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
 | initialValues | Set value by Form initialization or reset | object | - |  |
@ -143,10 +143,10 @@ Form field component for data bidirectional binding, validation, layout, and so
 | noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false |  |
 | preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
 | required | Display required style. It will be generated by the validation rule | boolean | false |  |
-| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#rule)\[] | - |  |
+| rules | Rules for field validation. Click [here](#form-demo-basic) to see an example | [Rule](#rule)\[] | - |  |
 | shouldUpdate | Custom field update logic. See [below](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false |  |
 | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#api) | - | 4.7.0 |
-| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` |  |
+| trigger | When to collect the value of children node. Click [here](#form-demo-customized-form-controls) to see an example | string | `onChange` |  |
 | validateDebounce | Delay milliseconds to start validation | number | - | 5.9.0 |
 | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - |  |
@ -163,7 +163,7 @@ After wrapped by `Form.Item` with `name` property, `value`(or other property def

 ### dependencies

-Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-dependencies).
+Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#form-demo-dependencies).

 `dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic.

@ -187,7 +187,7 @@ related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500)
 </Form.Item>
 ```

-You can ref [example](#components-form-demo-horizontal-login) to see detail.
+You can ref [example](#form-demo-horizontal-login) to see detail.

 When `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values:

@ -203,7 +203,7 @@ When `shouldUpdate` is a function, it will be called by form values update. Prov
 </Form.Item>
 ```

-You can ref [example](#components-form-demo-control-hooks) to see detail.
+You can ref [example](#form-demo-control-hooks) to see detail.

 ### messageVariables

@ -267,7 +267,7 @@ Some operator functions in render form of Form.List.

 ## Form.ErrorList

-New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item).
+New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#form-demo-dynamic-form-item).

 | Property | Description | Type         | Default |
 | -------- | ----------- | ------------ | ------- |
@ -275,7 +275,7 @@ New in 4.7.0. Show error messages, should only work with `rules` of Form.List. S

 ## Form.Provider

-Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#components-form-demo-form-context).
+Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#form-demo-form-context).

 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
@ -546,7 +546,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | transform | Transform value to the rule before validation | (value) => any |  |
 | type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/react-component/async-validator#type) | string |  |
 | validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] |  |
-| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#rule), value) => Promise |  |
+| validator | Customize validation rule. Accept Promise as return. See [example](#form-demo-register) | ([rule](#rule), value) => Promise |  |
 | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
 | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean |  |

--- a/components/form/index.tsx
+++ b/components/form/index.tsx
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -70,7 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true |  |
 | disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
 | component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form |  |
-| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
+| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
 | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#forminstance) | - |  |
 | feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
 | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  |
@ -144,10 +144,10 @@ const validateMessages = {
 | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false |  |
 | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
 | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |  |
-| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#rule)\[] | - |  |
+| rules | 校验规则，设置字段的校验逻辑。点击[此处](#form-demo-basic)查看示例 | [Rule](#rule)\[] | - |  |
 | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false |  |
 | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#api) | - | 4.7.0 |
-| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` |  |
+| trigger | 设置收集字段值变更的时机。点击[此处](#form-demo-customized-form-controls)查看示例 | string | `onChange` |  |
 | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
 | validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
@ -164,7 +164,7 @@ const validateMessages = {

 ### dependencies

-当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-dependencies)。
+当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。

 `dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。

@ -188,7 +188,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 </Form.Item>
 ```

-你可以参考[示例](#components-form-demo-horizontal-login)查看具体使用场景。
+你可以参考[示例](#form-demo-horizontal-login)查看具体使用场景。

 当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：

@ -204,7 +204,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 </Form.Item>
 ```

-你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。
+你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。

 ### messageVariables

@ -266,7 +266,7 @@ Form.List 渲染表单相关操作函数。

 ## Form.ErrorList

-4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。
+4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。

 | 参数   | 说明     | 类型         | 默认值 |
 | ------ | -------- | ------------ | ------ |
@ -274,7 +274,7 @@ Form.List 渲染表单相关操作函数。

 ## Form.Provider

-提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#components-form-demo-form-context)。
+提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@ -545,7 +545,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | transform | 将字段值转换成目标值后进行校验 | (value) => any |  |
 | type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | string |  |
 | validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] |  |
-| validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#rule), value) => Promise |  |
+| validator | 自定义校验，接收 Promise 作为返回值。[示例](#form-demo-register)参考 | ([rule](#rule), value) => Promise |  |
 | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
 | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean |  |

--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@ -7,7 +7,7 @@
 Child elements vertically aligned.

 ```css
-#components-grid-demo-flex-align [class~='ant-row'] {
+#grid-demo-flex-align [class~='ant-row'] {
  background: rgba(128, 128, 128, 0.08);
 }
 ```
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@ -7,7 +7,7 @@
 To change the element sort by `order`.

 ```css
-#components-grid-demo-flex-order [class~='ant-row'] {
+#grid-demo-flex-order [class~='ant-row'] {
  background: rgba(128, 128, 128, 0.08);
 }
 ```
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@ -9,7 +9,7 @@
 Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.

 ```css
-#components-grid-demo-flex [class~='ant-row'] {
+#grid-demo-flex [class~='ant-row'] {
  background: rgba(128, 128, 128, 0.08);
 }
 ```
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@ -7,27 +7,27 @@
 A simple playground for column count and gutter.

 ```css
-#components-grid-demo-playground [class~='ant-col'] {
+#grid-demo-playground [class~='ant-col'] {
  background: transparent;
  border: 0;
 }
-#components-grid-demo-playground [class~='ant-col'] > div {
+#grid-demo-playground [class~='ant-col'] > div {
  height: 120px;
  font-size: 14px;
  line-height: 120px;
  background: #0092ff;
  border-radius: 4px;
 }
-#components-grid-demo-playground pre {
+#grid-demo-playground pre {
  padding: 8px 16px;
  font-size: 14px;
  background: #f9f9f9;
  border-radius: 6px;
 }
-#components-grid-demo-playground pre.demo-code {
+#grid-demo-playground pre.demo-code {
  direction: ltr;
 }
-#components-grid-demo-playground .ant-col {
+#grid-demo-playground .ant-col {
  padding: 0;
 }
 ```
--- a/components/grid/index.tsx
+++ b/components/grid/index.tsx
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
--- a/components/input/index.tsx
+++ b/components/input/index.tsx
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@ -657,7 +657,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
      },

      // fix slight height diff in Firefox:
-      // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
+      // https://ant.design/components/auto-complete-cn/#auto-complete-demo-certain-category
      [`${componentCls}-lg`]: {
        lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(),
      },
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@ -2,10 +2,10 @@

 内嵌菜单可以被缩起/展开。

-你可以在 [Layout](/components/layout-cn/#components-layout-demo-side) 里查看侧边布局结合的完整示例。
+你可以在 [Layout](/components/layout-cn/#layout-demo-side) 里查看侧边布局结合的完整示例。

 ## en-US

 Inline menu could be collapsed.

-Here is [a complete demo](/components/layout/#components-layout-demo-side) with sider layout.
+Here is [a complete demo](/components/layout/#layout-demo-side) with sider layout.
--- a/components/modal/demo/dark.tsx
+++ b/components/modal/demo/dark.tsx
@ -455,10 +455,10 @@ export default () => {
          style={{ marginTop: 16 }}
        />
        <Anchor>
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
          <Link
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
            title="Basic demo with Target"
            target="_blank"
          />
--- a/components/modal/index.tsx
+++ b/components/modal/index.tsx
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@ -7,7 +7,7 @@
 Mini size pagination.

 <style>
-#components-pagination-demo-mini .ant-pagination:not(:last-child) {
+#pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
 }
 </style>
--- a/components/pagination/design/behavior-pattern.tsx
+++ b/components/pagination/design/behavior-pattern.tsx
@ -17,19 +17,19 @@ const BehaviorPattern: React.FC = () => (
          id: '200000005',
          label: '调整单页展示条数',
          targetType: 'extension',
-          link: 'components-pagination-index-tab-design-demo-page-size',
+          link: 'pagination-index-tab-design-demo-page-size',
        },
        {
          id: '200000006',
          label: '快速跳转',
          targetType: 'extension',
-          link: 'components-pagination-index-tab-design-demo-quick-jump',
+          link: 'pagination-index-tab-design-demo-quick-jump',
        },
        {
          id: '200000007',
          label: '了解数据总量',
          targetType: 'extension',
-          link: 'components-pagination-index-tab-design-demo-total',
+          link: 'pagination-index-tab-design-demo-total',
        },
      ],
    }}
--- a/components/pagination/index.tsx
+++ b/components/pagination/index.tsx
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@ -7,7 +7,7 @@
 There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target.

 <style>
-#components-popconfirm-demo-placement .ant-btn {
+#popconfirm-demo-placement .ant-btn {
  margin-left: 0;
  margin-right: 8px;
  margin-bottom: 8px;
@ -15,7 +15,7 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`
  text-align: center;
  padding: 0;
 }
-#components-popconfirm-demo-placement .ant-btn-rtl {
+#popconfirm-demo-placement .ant-btn-rtl {
  margin-left: 8px;
  margin-right: 0;
 }
--- a/components/progress/design/behavior-pattern.tsx
+++ b/components/progress/design/behavior-pattern.tsx
@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
            {
              id: '707000085',
              label: '了解任务进度',
-              link: 'components-progress-index-tab-design-demo-progress',
+              link: 'progress-index-tab-design-demo-progress',
            },
            {
              id: '707000086',
              label: '了解任务状态',
-              link: 'components-progress-index-tab-design-demo-status',
+              link: 'progress-index-tab-design-demo-status',
            },
          ],
        },
@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => (
          id: '200000005',
          label: '查看进度相关描述',
          targetType: 'extension',
-          link: 'components-progress-index-tab-design-demo-info',
+          link: 'progress-index-tab-design-demo-info',
        },
      ],
    }}
--- a/components/progress/index.tsx
+++ b/components/progress/index.tsx
--- a/components/qrcode/index.tsx
+++ b/components/qrcode/index.tsx
--- a/components/radio/index.tsx
+++ b/components/radio/index.tsx
--- a/components/row/index.tsx
+++ b/components/row/index.tsx
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@ -7,10 +7,10 @@
 Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks.

 <style>
-#components-slider-demo-mark h4 {
+#slider-demo-mark h4 {
  margin: 0 0 16px;
 }
-#components-slider-demo-mark .ant-slider-with-marks {
+#slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
 }
 </style>
--- a/components/statistic/index.tsx
+++ b/components/statistic/index.tsx
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
--- a/components/table/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/table/tests/snapshots/demo-extend.test.ts.snap
@ -867,7 +867,7 @@ exports[`renders components/table/demo/colspan-rowspan.tsx extend context correc
 exports[`renders components/table/demo/component-token.tsx extend context correctly 1`] = `
 Array [
  <form
-    class="ant-form ant-form-inline components-table-demo-control-bar"
+    class="ant-form ant-form-inline table-demo-control-bar"
    style="margin-bottom: 16px;"
  >
    <div
@ -4996,7 +4996,7 @@ exports[`renders components/table/demo/drag-sorting-handler.tsx extend context c
 exports[`renders components/table/demo/dynamic-settings.tsx extend context correctly 1`] = `
 Array [
  <form
-    class="ant-form ant-form-inline components-table-demo-control-bar"
+    class="ant-form ant-form-inline table-demo-control-bar"
    style="margin-bottom: 16px;"
  >
    <div
@ -18923,7 +18923,7 @@ exports[`renders components/table/demo/narrow.tsx extend context correctly 2`] =
 exports[`renders components/table/demo/nest-table-border-debug.tsx extend context correctly 1`] = `
 Array [
  <form
-    class="ant-form ant-form-inline components-table-demo-control-bar"
+    class="ant-form ant-form-inline table-demo-control-bar"
    style="margin-bottom: 16px;"
  >
    <div
--- a/components/table/tests/snapshots/demo.test.ts.snap
+++ b/components/table/tests/snapshots/demo.test.ts.snap
@ -867,7 +867,7 @@ exports[`renders components/table/demo/colspan-rowspan.tsx correctly 1`] = `
 exports[`renders components/table/demo/component-token.tsx correctly 1`] = `
 Array [
  <form
-    class="ant-form ant-form-inline components-table-demo-control-bar"
+    class="ant-form ant-form-inline table-demo-control-bar"
    style="margin-bottom:16px"
  >
    <div
@ -4452,7 +4452,7 @@ exports[`renders components/table/demo/drag-sorting-handler.tsx correctly 1`] =
 exports[`renders components/table/demo/dynamic-settings.tsx correctly 1`] = `
 Array [
  <form
-    class="ant-form ant-form-inline components-table-demo-control-bar"
+    class="ant-form ant-form-inline table-demo-control-bar"
    style="margin-bottom:16px"
  >
    <div
@ -15590,7 +15590,7 @@ exports[`renders components/table/demo/narrow.tsx correctly 1`] = `
 exports[`renders components/table/demo/nest-table-border-debug.tsx correctly 1`] = `
 Array [
  <form
-    class="ant-form ant-form-inline components-table-demo-control-bar"
+    class="ant-form ant-form-inline table-demo-control-bar"
    style="margin-bottom:16px"
  >
    <div
--- a/components/table/demo/component-token.tsx
+++ b/components/table/demo/component-token.tsx
@ -178,7 +178,7 @@ const App: React.FC = () => {
    <>
      <Form
        layout="inline"
-        className="components-table-demo-control-bar"
+        className="table-demo-control-bar"
        style={{ marginBottom: 16 }}
      >
        <Form.Item label="Bordered">
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@ -7,7 +7,7 @@
 Select different settings to see the result.

 <style>
-.components-table-demo-control-bar .ant-form-item {
+.table-demo-control-bar .ant-form-item {
  margin-right: 16px !important;
  margin-bottom: 8px !important;
 }
--- a/components/table/demo/dynamic-settings.tsx
+++ b/components/table/demo/dynamic-settings.tsx
@ -178,7 +178,7 @@ const App: React.FC = () => {
    <>
      <Form
        layout="inline"
-        className="components-table-demo-control-bar"
+        className="table-demo-control-bar"
        style={{ marginBottom: 16 }}
      >
        <Form.Item label="Bordered">
--- a/components/table/demo/nest-table-border-debug.tsx
+++ b/components/table/demo/nest-table-border-debug.tsx
@ -101,7 +101,7 @@ const App: React.FC = () => {
    <>
      <Form
        layout="inline"
-        className="components-table-demo-control-bar"
+        className="table-demo-control-bar"
        style={{ marginBottom: 16 }}
      >
        <Form.Item label="Root Table Bordered">
--- a/components/table/demo/resizable-column.md
+++ b/components/table/demo/resizable-column.md
@ -7,12 +7,12 @@
 Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort.

 ```css
-#components-table-demo-resizable-column .react-resizable {
+#table-demo-resizable-column .react-resizable {
  position: relative;
  background-clip: padding-box;
 }

-#components-table-demo-resizable-column .react-resizable-handle {
+#table-demo-resizable-column .react-resizable-handle {
  position: absolute;
  right: -5px;
  bottom: 0;
--- a/components/table/demo/size.md
+++ b/components/table/demo/size.md
@ -6,4 +6,4 @@

 There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.

-<style>#components-table-demo-size h4 { margin-bottom: 16px; }</style>
+<style>#table-demo-size h4 { margin-bottom: 16px; }</style>
--- a/components/table/index.tsx
+++ b/components/table/index.tsx
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -13,7 +13,7 @@ Ant Design has 3 types of Tabs for different situations.

 - Card Tabs: for managing too many closeable views.
 - Normal Tabs: for functional aspects of a page.
- [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.
+- [Radio.Button](/components/radio/#radio-demo-radiobutton): for secondary tabs.

 ## Examples

--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。

 - 卡片式的页签，提供可关闭的样式，常用于容器顶部。
 - 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
- [Radio.Button](/components/radio-cn/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
+- [Radio.Button](/components/radio-cn/#radio-demo-radiobutton) 可作为更次级的页签来使用。

 ## 代码演示

--- a/components/theme/index.tsx
+++ b/components/theme/index.tsx
--- a/components/timeline/index.tsx
+++ b/components/timeline/index.tsx
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@ -76,7 +76,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | treeExpandedKeys | Set expanded keys | string\[] | - |  |
 | treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |  |
 | treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] |  |
-| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
+| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#tree-demo-line) | boolean \| object | false | 4.17.0 |
 | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` |  |
 | treeNodeLabelProp | Will render as content of select | string | `title` |  |
 | value | To set the current selected treeNode(s) | string \| string\[] | - |  |
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@ -76,7 +76,7 @@ demo:
 | treeExpandAction | 点击节点 title 时的展开逻辑，可选：false \| `click` \| `doubleClick` | string \| boolean | false | 4.21.0 |
 | treeExpandedKeys | 设置展开的树节点 | string\[] | - |  |
 | treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
-| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree-cn#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
+| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree-cn#tree-demo-line) | boolean \| object | false | 4.17.0 |
 | treeLoadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string[] | [] |  |
 | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` |  |
 | treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` |  |
--- a/components/tree/index.tsx
+++ b/components/tree/index.tsx
--- a/components/typography/index.tsx
+++ b/components/typography/index.tsx
--- a/components/upload/index.tsx
+++ b/components/upload/index.tsx
--- a/components/version/index.tsx
+++ b/components/version/index.tsx
--- a/docs/blog/virtual-table.en-US.md
+++ b/docs/blog/virtual-table.en-US.md
@ -31,7 +31,7 @@ Table supports virtual scrolling by setting the `virtual` prop. At the same time

 ![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original)

-You can visit the [virtual list](/components/table#components-table-demo-virtual-list) example to experience it.
+You can visit the [virtual list](/components/table#table-demo-virtual-list) example to experience it.

 ## Some details

--- a/docs/blog/virtual-table.zh-CN.md
+++ b/docs/blog/virtual-table.zh-CN.md
@ -31,7 +31,7 @@ Table 通过 `virtual` 属性即可开启虚拟滚动能力。同时，原 Table

 ![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original)

-你可以直接访问 [虚拟列表](/components/table#components-table-demo-virtual-list) 示例进行体验。
+你可以直接访问 [虚拟列表](/components/table#table-demo-virtual-list) 示例进行体验。

 ## 一些细节

--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@ -177,7 +177,7 @@ Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design

 Static methods like message/notification/Modal.confirm are not using the same render tree as `<Button />`, but rendered to independent DOM node created by `ReactDOM.render`, which cannot access React context from ConfigProvider. Consider two solutions here:

-1. Replace original usages with [message.useMessage](/components/message/#components-message-demo-hooks), [notification.useNotification](/components/notification/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-notification) and [Modal.useModal](/components/modal/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-modalxxx).
+1. Replace original usages with [message.useMessage](/components/message/#message-demo-hooks), [notification.useNotification](/components/notification/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-notification) and [Modal.useModal](/components/modal/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-modalxxx).

 2. Use [App.useApp](/components/app-cn#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95) to get message/notification/modal instance.

--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@ -151,7 +151,7 @@ type InputRef = GetRef<typeof Input>;

 ## 我的组件默认语言是英文的？如何切回中文的。

-请尝试使用 [ConfigProvider](/components/config-provider-cn#components-config-provider-demo-locale) 组件来包裹你的应用。
+请尝试使用 [ConfigProvider](/components/config-provider-cn#config-provider-demo-locale) 组件来包裹你的应用。

 如果日期组件的国际化仍未生效，请配置 `dayjs.locale('zh-cn')` 并**检查你本地的 `dayjs` 版本和 `antd` 依赖的 `dayjs` 版本是否一致**。

@ -200,7 +200,7 @@ npm ls dayjs

 message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式，是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上，无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式：

-1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
+1. 使用官方提供的 [message.useMessage](/components/message-cn/#message-demo-hooks)、[notification.useNotification](/components/notification-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。

 2. 使用 [App.useApp](/components/app-cn#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95) 直接调用 message、notification、modal 实例方法。