diff --git a/.github/workflows/compressed-size.yml b/.github/workflows/compressed-size.yml
index 04e8a356f9..34f234d3eb 100644
--- a/.github/workflows/compressed-size.yml
+++ b/.github/workflows/compressed-size.yml
@@ -9,8 +9,14 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   compressed-size:
+    permissions:
+      contents: read  # for actions/checkout to fetch code
+      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
     runs-on: ubuntu-latest
     env:
       CI_JOB_NUMBER: 1
diff --git a/.github/workflows/issue-check-inactive.yml b/.github/workflows/issue-check-inactive.yml
index df05004109..9a79731004 100644
--- a/.github/workflows/issue-check-inactive.yml
+++ b/.github/workflows/issue-check-inactive.yml
@@ -4,8 +4,14 @@ on:
   schedule:
     - cron: "0 0 */15 * *"
 
+permissions:
+  contents: read
+
 jobs:
   issue-check-inactive:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: check-inactive
diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml
index 3107470326..be27eb3d86 100644
--- a/.github/workflows/issue-close-require.yml
+++ b/.github/workflows/issue-close-require.yml
@@ -4,8 +4,14 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
+permissions:
+  contents: read
+
 jobs:
   issue-close-require:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: need reproduce
diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml
index 889557feca..6fc3d2f19f 100644
--- a/.github/workflows/issue-labeled.yml
+++ b/.github/workflows/issue-labeled.yml
@@ -6,8 +6,14 @@ on:
   issues:
     types: [labeled]
 
+permissions:
+  contents: read
+
 jobs:
   issue-labeled:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: help wanted
diff --git a/.github/workflows/issue-open-check.yml b/.github/workflows/issue-open-check.yml
index 34afcd6dcd..c99f2b12be 100644
--- a/.github/workflows/issue-open-check.yml
+++ b/.github/workflows/issue-open-check.yml
@@ -4,8 +4,15 @@ on:
   issues:
     types: [opened]
 
+permissions:
+  contents: read
+
 jobs:
   issue-open-check:
+    permissions:
+      contents: read  # for visiky/dingtalk-release-notify to get latest release
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/check-user-permission@v2
diff --git a/.github/workflows/issue-remove-inactive.yml b/.github/workflows/issue-remove-inactive.yml
index 90556c416d..d52e84f39f 100644
--- a/.github/workflows/issue-remove-inactive.yml
+++ b/.github/workflows/issue-remove-inactive.yml
@@ -6,8 +6,14 @@ on:
   issue_comment:
     types: [created, edited]
 
+permissions:
+  contents: read
+
 jobs:
   issue-remove-inactive:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: remove inactive
diff --git a/.github/workflows/issues-similarity-analysis.yml b/.github/workflows/issues-similarity-analysis.yml
index 8a378357f6..64aa8ced80 100644
--- a/.github/workflows/issues-similarity-analysis.yml
+++ b/.github/workflows/issues-similarity-analysis.yml
@@ -4,8 +4,13 @@ on:
   issues:
     types: [opened, edited]
 
+permissions:
+  contents: read
+
 jobs:
   similarity-analysis:
+    permissions:
+      issues: write  # for actions-cool/issues-similarity-analysis to create issue comments
     runs-on: ubuntu-latest
     steps:
       - name: analysis
diff --git a/.github/workflows/pr-check-ci.yml b/.github/workflows/pr-check-ci.yml
index e3e608b4b5..d842bd97e7 100644
--- a/.github/workflows/pr-check-ci.yml
+++ b/.github/workflows/pr-check-ci.yml
@@ -5,8 +5,16 @@ on:
   schedule:
     - cron: "*/10 * * * *"
 
+permissions:
+  contents: read
+
 jobs:
   pr-check-ci:
+    permissions:
+      checks: read  # for actions-cool/check-pr-ci to get check reference
+      contents: write  # for actions-cool/check-pr-ci to merge PRs
+      issues: write  # for actions-cool/check-pr-ci to update issues
+      pull-requests: write  # for actions-cool/check-pr-ci to update PRs
     runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/check-pr-ci@v1
diff --git a/.github/workflows/pr-check-merge.yml b/.github/workflows/pr-check-merge.yml
index c2ff3d4e10..8f628af602 100644
--- a/.github/workflows/pr-check-merge.yml
+++ b/.github/workflows/pr-check-merge.yml
@@ -4,8 +4,14 @@ on:
   pull_request_target:
     types: [opened]
 
+permissions:
+  contents: read
+
 jobs:
   pr-check-merge:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     if: (github.event.pull_request.head.ref == 'feature' || github.event.pull_request.head.ref == 'master') && github.event.pull_request.head.user.login == 'ant-design'
     steps:
diff --git a/.github/workflows/pr-open-check.yml b/.github/workflows/pr-open-check.yml
index 6dfdb39ff2..19a3bed997 100644
--- a/.github/workflows/pr-open-check.yml
+++ b/.github/workflows/pr-open-check.yml
@@ -4,8 +4,14 @@ on:
   pull_request_target:
     types: [opened, edited, reopened, synchronize]
 
+permissions:
+  contents: read
+
 jobs:
   refuse:
+    permissions:
+      issues: write  # for actions-cool/pr-welcome to create, update & react on issues
+      pull-requests: write  # for actions-cool/pr-welcome to request reviewer
     runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/pr-welcome@v1
@@ -19,6 +25,8 @@ jobs:
           close: true
 
   check-changelog:
+    permissions:
+      pull-requests: write  # for actions-cool/pr-check-fill to create or update PR comments
     runs-on: ubuntu-latest
     steps:
       - name: check fill
diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml
index b50497d7a1..0af77d36c4 100644
--- a/.github/workflows/preview-build.yml
+++ b/.github/workflows/preview-build.yml
@@ -11,6 +11,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   # Prepare node modules. Reuse cache if available
   setup:
diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml
index 6ed0f06f05..5726bb1acc 100644
--- a/.github/workflows/preview-deploy.yml
+++ b/.github/workflows/preview-deploy.yml
@@ -8,8 +8,15 @@ on:
     types:
       - completed
 
+permissions:
+  contents: read
+
 jobs:
   deploy-site:
+    permissions:
+      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
+      issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
+      pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: deploy preview
     runs-on: ubuntu-latest
     if: >
@@ -65,6 +72,10 @@ jobs:
           number: ${{ steps.pr.outputs.id }}
 
   build-site-failed:
+    permissions:
+      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
+      issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
+      pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: build preview failed
     runs-on: ubuntu-latest
     if: >
diff --git a/.github/workflows/preview-start.yml b/.github/workflows/preview-start.yml
index fdd2ad9dd6..692b09c5ed 100644
--- a/.github/workflows/preview-start.yml
+++ b/.github/workflows/preview-start.yml
@@ -10,8 +10,14 @@ on:
   pull_request_target:
     types: [opened, synchronize, reopened]
 
+permissions:
+  contents: read
+
 jobs:
   preview-start:
+    permissions:
+      issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
+      pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: start preview info
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/rebase.yml b/.github/workflows/rebase.yml
index facf27780b..01f3942cda 100644
--- a/.github/workflows/rebase.yml
+++ b/.github/workflows/rebase.yml
@@ -4,8 +4,14 @@ on:
   issue_comment:
     types: [created]
 
+permissions:
+  contents: read
+
 jobs:
   rebase:
+    permissions:
+      contents: write  # for cirrus-actions/rebase to push code to rebase
+      pull-requests: read  # for cirrus-actions/rebase to get info about PR
     name: Rebase
     if: github.event.issue.pull_request != '' && (contains(github.event.comment.body, '/rebase') || contains(github.event.comment.body, '\rebase'))
     runs-on: ubuntu-latest
diff --git a/.github/workflows/release-helper.yml b/.github/workflows/release-helper.yml
index 05ee24a927..61723624cc 100644
--- a/.github/workflows/release-helper.yml
+++ b/.github/workflows/release-helper.yml
@@ -10,8 +10,13 @@ name: Release Helper
 on:
   create
 
+permissions:
+  contents: read
+
 jobs:
   release-helper:
+    permissions:
+      contents: write  # for actions-cool/release-helper to create releases
     if: github.event.ref_type == 'tag'
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml
index 57553c24fd..f358c15171 100644
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@@ -4,6 +4,9 @@ name: Deploy website
 on:
   create
 
+permissions:
+  contents: read
+
 jobs:
   setup:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/sync-gitee.yml b/.github/workflows/sync-gitee.yml
index 4b62ef4245..b9685e8dee 100644
--- a/.github/workflows/sync-gitee.yml
+++ b/.github/workflows/sync-gitee.yml
@@ -10,8 +10,13 @@ on:
       - 3.x-stable
   create:
 
+permissions:
+  contents: read
+
 jobs:
   mirror:
+    permissions:
+      contents: none
     runs-on: ubuntu-latest
     if: github.repository == 'ant-design/ant-design'
     steps:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index fda0e3ca65..a263110e3e 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -9,6 +9,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   setup:
     runs-on: ubuntu-latest
@@ -23,7 +26,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts --force
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for single file
         run: |
@@ -40,7 +43,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci --force
+        run: npm ci
 
   lint:
     runs-on: ubuntu-latest
@@ -231,8 +234,7 @@ jobs:
     name: test
     strategy:
       matrix:
-        react: ['16', '17']
-        # react: ['17', '18']
+        react: ['16', '17', '18']
         module: ['dom', 'node', 'dist']
     env:
       REACT: ${{ matrix.react }}
@@ -349,8 +351,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        react: ['16', '17']
-        # react: ['17', '18']
+        react: ['16', '17', '18']
         module: [lib, es]
     env:
       REACT: ${{ matrix.react }}
@@ -402,4 +403,4 @@ jobs:
         run: npm test
         env:
           LIB_DIR: ${{ matrix.module }}
-    needs: compile
\ No newline at end of file
+    needs: compile
diff --git a/.github/workflows/ui-upload.yml b/.github/workflows/ui-upload.yml
index a1c925f4be..632e53a1e8 100644
--- a/.github/workflows/ui-upload.yml
+++ b/.github/workflows/ui-upload.yml
@@ -8,8 +8,14 @@ on:
     types:
       - completed
 
+permissions:
+  contents: read
+
 jobs:
   upload-ui:
+    permissions:
+      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
+      pull-requests: read  # for dawidd6/action-download-artifact to query commit hash
     name: deploy preview
     runs-on: ubuntu-latest
     if: >
diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml
index 5484c116a0..1b70d0aa80 100644
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@@ -12,6 +12,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   test:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/verify-files-modify.yml b/.github/workflows/verify-files-modify.yml
index d76777352f..bb4c0157c7 100644
--- a/.github/workflows/verify-files-modify.yml
+++ b/.github/workflows/verify-files-modify.yml
@@ -4,8 +4,13 @@ on:
   pull_request_target:
     types: [opened, synchronize]
 
+permissions:
+  contents: read
+
 jobs:
   verify:
+    permissions:
+      pull-requests: write  # for actions-cool/verify-files-modify to update status of PRs
     runs-on: ubuntu-latest
     steps:
       - name: verify-version
diff --git a/.github/workflows/verify-package-version.yml b/.github/workflows/verify-package-version.yml
index 23ad7572f4..6ff6065a35 100644
--- a/.github/workflows/verify-package-version.yml
+++ b/.github/workflows/verify-package-version.yml
@@ -4,8 +4,14 @@ on:
   pull_request:
     types: [opened, edited, reopened, synchronize, ready_for_review]
 
+permissions:
+  contents: read
+
 jobs:
   verify:
+    permissions:
+      contents: read  # for actions/checkout to fetch code
+      pull-requests: write  # for actions-cool/verify-package-version to comment on PR
     runs-on: ubuntu-latest
     if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release')
     steps:
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 7897081762..c29c7204d4 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.19.5
+
+`2022-04-02`
+
+- 🐞 Fix Form that not keep store value when unmount and mount again. [#34845](https://github.com/ant-design/ant-design/pull/34845)
+- 🐞 Fix Pagination under `<ConfigProvider componentSize="large" />` should display middle size Select. [#34756](https://github.com/ant-design/ant-design/pull/34756)
+- 🐞 fix Skeleton to unable to render `childten` of non-react element. [#34751](https://github.com/ant-design/ant-design/pull/34751) [@1247748612](https://github.com/1247748612)
+- 💄 Fix Tag `@tag-border-radius` less variable not work. [#34741](https://github.com/ant-design/ant-design/pull/34741)
+
 ## 4.19.4
 
 `2022-03-27`
@@ -38,7 +47,8 @@ timeline: true
 - 💄 Fix missing `status` style in RangePicker. [#34509](https://github.com/ant-design/ant-design/pull/34509)
 - 🛎 Add warning for Input getting blurred when dynamically add `hasFeedback`. [#34475](https://github.com/ant-design/ant-design/pull/34475)
 - 🐞 Fix missing classname in input when Input has `prefix` or `suffix`. [#34474](https://github.com/ant-design/ant-design/pull/34474)
-- 🌐 Updated it_LT locale for `typeTemplate`. [#34567](https://github.com/ant-design/ant-design/pull/34567) [@Anizcus](https://gitit_LTit_LThub.com/Anizcus)
+- 🇱🇹 Updated lt_LT locale for `typeTemplate`. [#34567](https://github.com/ant-design/ant-design/pull/34567) [@Anizcus](https://gitit_LTit_LThub.com/Anizcus)
+- 🇮🇹 Updated it_iT locale for `Table`. [#34566](https://github.com/ant-design/ant-design/pull/34566) [@freshgiammi](https://gitit_LTit_LThub.com/freshgiammi)
 
 ## 4.19.2
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 54b589cdbd..e2f1f1693e 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.19.5
+
+`2022-04-02`
+
+- 🐞 修复 Form 在整个被 unmount 后再次 mount，原 Form 的值会被重置的问题。[#34845](https://github.com/ant-design/ant-design/pull/34845)
+- 🐞 修复 Pagination 在 `<ConfigProvider componentSize="large" />` 下的 Select 大小问题。[#34756](https://github.com/ant-design/ant-design/pull/34756)
+- 🐞 修复 Skeleton 不渲染非 react element 类型的 `children` 问题。[#34751](https://github.com/ant-design/ant-design/pull/34751) [@1247748612](https://github.com/1247748612)
+- 💄 修复 Tag `@tag-border-radius` less 变量不生效的问题。[#34741](https://github.com/ant-design/ant-design/pull/34741)
+
 ## 4.19.4
 
 `2022-03-27`
@@ -38,7 +47,8 @@ timeline: true
 - 💄 修复 RangePicker `status` 相关样式丢失的问题。[#34509](https://github.com/ant-design/ant-design/pull/34509)
 - 🛎 为动态改变 Form.Item 的 `hasFeedback` 时 Input 焦点丢失添加警告。[#34475](https://github.com/ant-design/ant-design/pull/34475)
 - 🐞 修复 Input 有 `prefix` 或者 `suffix` 时 input 缺少某些 className 的问题。[#34474](https://github.com/ant-design/ant-design/pull/34474)
-- 🌐 更新 it_LT 的 locale。[#34567](https://github.com/ant-desin/ant-design/pull/34567) [@Anizcus](https://github.com/Anizcus)
+- 🇱🇹 更新 lt_LT 的 locale。[#34567](https://github.com/ant-design/ant-design/pull/34567) [@Anizcus](https://github.com/Anizcus)
+- 🇮🇹 更新 it_iT 的 locale。[#34566](https://github.com/ant-design/ant-design/pull/34566) [@freshgiammi](https://gitit_LTit_LThub.com/freshgiammi)
 
 ## 4.19.2
 
diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx
index 45f209602c..0600ceeac4 100644
--- a/components/_util/ActionButton.tsx
+++ b/components/_util/ActionButton.tsx
@@ -12,6 +12,7 @@ export interface ActionButtonProps {
   buttonProps?: ButtonProps;
   emitEvent?: boolean;
   quitOnNullishReturnValue?: boolean;
+  children?: React.ReactNode;
 }
 
 function isThenable(thing?: PromiseLike<any>): boolean {
diff --git a/components/_util/throttleByAnimationFrame.tsx b/components/_util/throttleByAnimationFrame.tsx
index 54516d3228..c04923cd40 100644
--- a/components/_util/throttleByAnimationFrame.tsx
+++ b/components/_util/throttleByAnimationFrame.tsx
@@ -1,20 +1,26 @@
 import raf from 'rc-util/lib/raf';
 
-export function throttleByAnimationFrame(fn: (...args: any[]) => void) {
+export function throttleByAnimationFrame<T extends unknown[]>(fn: (...args: T) => void) {
   let requestId: number | null;
 
-  const later = (args: any[]) => () => {
+  const later = (args: T) => () => {
     requestId = null;
     fn(...args);
   };
 
-  const throttled = (...args: any[]) => {
+  const throttled: {
+    (...args: T): void;
+    cancel: () => void;
+  } = (...args: T) => {
     if (requestId == null) {
       requestId = raf(later(args));
     }
   };
 
-  (throttled as any).cancel = () => raf.cancel(requestId!);
+  throttled.cancel = () => {
+    raf.cancel(requestId!);
+    requestId = null;
+  };
 
   return throttled;
 }
diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 4cd8c49ea1..bf06f49573 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -27,6 +27,7 @@ function isNotGrey(color: string) {
 export interface WaveProps {
   insertExtraNode?: boolean;
   disabled?: boolean;
+  children?: React.ReactNode;
 }
 
 export default class Wave extends React.Component<WaveProps> {
diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index 292d823058..93dcd5ae63 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/affix/demo/debug.md b/components/affix/demo/debug.md
index 5300bf5230..f8a97b4435 100644
--- a/components/affix/demo/debug.md
+++ b/components/affix/demo/debug.md
@@ -35,5 +35,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md
index acbdd7d3c1..48cdbba705 100644
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -16,10 +16,9 @@ Callback with affixed state.
 ```tsx
 import { Affix, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
-  </Affix>,
-  mountNode,
+  </Affix>
 );
 ```
diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md
index a938374c8d..0fad871175 100644
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -30,7 +30,7 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>
diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
index ac1b4aa7ce..b3b42da520 100644
--- a/components/alert/ErrorBoundary.tsx
+++ b/components/alert/ErrorBoundary.tsx
@@ -4,6 +4,7 @@ import Alert from '.';
 interface ErrorBoundaryProps {
   message?: React.ReactNode;
   description?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export default class ErrorBoundary extends React.Component<
diff --git a/components/alert/demo/action.md b/components/alert/demo/action.md
index d97ebcda99..4fae7619d5 100644
--- a/components/alert/demo/action.md
+++ b/components/alert/demo/action.md
@@ -17,7 +17,7 @@ Custom action.
 import React from 'react';
 import { Alert, Button, Space } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       message="Success Tips"
@@ -69,8 +69,7 @@ ReactDOM.render(
       }
       closable
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
index e5be4f9bc9..0eebe712d0 100644
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -17,7 +17,7 @@ Display Alert as a banner at top of page.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert message="Warning text" banner />
     <br />
@@ -30,7 +30,6 @@ ReactDOM.render(
     <Alert showIcon={false} message="Warning text without icon" banner />
     <br />
     <Alert type="error" message="Error text" banner />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index 27d5d43f51..a7000a88ff 100644
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -16,7 +16,7 @@ The simplest usage for short messages.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
+export default () => <Alert message="Success Text" type="success" />;
 ```
 
 <style>
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index 68b691a33b..8e5f8b3872 100644
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -20,7 +20,7 @@ const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -35,7 +35,6 @@ ReactDOM.render(
       closable
       onClose={onClose}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
index 80adff22cd..f0165cd872 100644
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -16,5 +16,5 @@ Replace the default icon with customized text.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
+export default () => <Alert message="Info Text" type="info" closeText="Close Now" />;
 ```
diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md
index 0e212c3c20..8dccd1da57 100644
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@@ -20,7 +20,7 @@ import { SmileOutlined } from '@ant-design/icons';
 
 const icon = <SmileOutlined />;
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert icon={icon} message="showIcon = false" type="success" />
     <Alert icon={icon} message="Success Tips" type="success" showIcon />
@@ -55,7 +55,6 @@ ReactDOM.render(
       type="error"
       showIcon
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index a5f9c25542..08b5d58698 100644
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -16,7 +16,7 @@ Additional description for alert message.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       message="Success Text"
@@ -38,7 +38,6 @@ ReactDOM.render(
       description="Error Description Error Description Error Description Error Description"
       type="error"
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/alert/demo/error-boundary.md b/components/alert/demo/error-boundary.md
index b8fb922a4a..de020ee205 100644
--- a/components/alert/demo/error-boundary.md
+++ b/components/alert/demo/error-boundary.md
@@ -34,10 +34,9 @@ const ThrowError: React.FC = () => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <ErrorBoundary>
     <ThrowError />
-  </ErrorBoundary>,
-  mountNode,
+  </ErrorBoundary>
 );
 ```
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
index 923fceb68a..d90413d04f 100644
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -16,7 +16,7 @@ A relevant icon will make information clearer and more friendly.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert message="Success Tips" type="success" showIcon />
     <Alert message="Informational Notes" type="info" showIcon />
@@ -47,7 +47,6 @@ ReactDOM.render(
       type="error"
       showIcon
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/alert/demo/loop-banner.md b/components/alert/demo/loop-banner.md
index 016a1b12e0..9fcca95166 100644
--- a/components/alert/demo/loop-banner.md
+++ b/components/alert/demo/loop-banner.md
@@ -18,7 +18,7 @@ import { Alert } from 'antd';
 import { TextLoop } from 'react-text-loop-next';
 import Marquee from 'react-fast-marquee';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       banner
@@ -39,7 +39,6 @@ ReactDOM.render(
         </Marquee>
       }
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/alert/demo/smooth-closed.md b/components/alert/demo/smooth-closed.md
index 42d0ea863c..19c2bc04fe 100644
--- a/components/alert/demo/smooth-closed.md
+++ b/components/alert/demo/smooth-closed.md
@@ -32,5 +32,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index 4806efde2b..45031271e9 100644
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -16,14 +16,13 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert message="Success Text" type="success" />
     <Alert message="Info Text" type="info" />
     <Alert message="Warning Text" type="warning" />
     <Alert message="Error Text" type="error" />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 7caea640c8..6a612096a3 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -98,7 +98,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
     activeLink: null,
   };
 
-  content: ConfigConsumerProps;
+  context: ConfigConsumerProps;
 
   private wrapperRef = React.createRef<HTMLDivElement>();
 
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md
index a27c04b2cb..cf338929bb 100644
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -18,7 +18,7 @@ import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-ReactDOM.render(
+export default () => (
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -26,8 +26,7 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```
 
diff --git a/components/anchor/demo/customizeHighlight.md b/components/anchor/demo/customizeHighlight.md
index a28285b4bc..9bd61b1c51 100644
--- a/components/anchor/demo/customizeHighlight.md
+++ b/components/anchor/demo/customizeHighlight.md
@@ -20,7 +20,7 @@ const { Link } = Anchor;
 
 const getCurrentAnchor = () => '#components-anchor-demo-static';
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,7 +28,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```
diff --git a/components/anchor/demo/onChange.md b/components/anchor/demo/onChange.md
index 8fae7d6517..2de6912f65 100644
--- a/components/anchor/demo/onChange.md
+++ b/components/anchor/demo/onChange.md
@@ -22,7 +22,7 @@ const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false} onChange={onChange}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -30,7 +30,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```
diff --git a/components/anchor/demo/onClick.md b/components/anchor/demo/onClick.md
index 0a71b46f12..3e45bb70f6 100644
--- a/components/anchor/demo/onClick.md
+++ b/components/anchor/demo/onClick.md
@@ -29,7 +29,7 @@ const handleClick = (
   console.log(link);
 };
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false} onClick={handleClick}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -37,7 +37,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```
diff --git a/components/anchor/demo/static.md b/components/anchor/demo/static.md
index 3295dd7c7e..ef5dc21274 100644
--- a/components/anchor/demo/static.md
+++ b/components/anchor/demo/static.md
@@ -18,7 +18,7 @@ import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -26,7 +26,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```
diff --git a/components/anchor/demo/targetOffset.md b/components/anchor/demo/targetOffset.md
index 4bfe76f89c..6e0d81c39d 100644
--- a/components/anchor/demo/targetOffset.md
+++ b/components/anchor/demo/targetOffset.md
@@ -36,5 +36,5 @@ const AnchorExample: React.FC = () => {
   );
 };
 
-ReactDOM.render(<AnchorExample />, mountNode);
+export default () => <AnchorExample />;
 ```
diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md
index 9ffca6aff5..aac1c2975f 100644
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -58,5 +58,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index d37f8eb48d..f015ac25cc 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -74,7 +74,7 @@ const Complete: React.FC = () => (
   </AutoComplete>
 );
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
 
 ```css
diff --git a/components/auto-complete/demo/custom.md b/components/auto-complete/demo/custom.md
index 6345e90718..3da9c394a2 100644
--- a/components/auto-complete/demo/custom.md
+++ b/components/auto-complete/demo/custom.md
@@ -52,5 +52,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
diff --git a/components/auto-complete/demo/form-debug.md b/components/auto-complete/demo/form-debug.md
index 0cb96955d7..476b6ff21b 100644
--- a/components/auto-complete/demo/form-debug.md
+++ b/components/auto-complete/demo/form-debug.md
@@ -21,7 +21,7 @@ const formItemLayout = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Form style={{ margin: '0 auto' }} {...formItemLayout}>
     <Form.Item label="单独 AutoComplete">
       <AutoComplete />
@@ -67,7 +67,6 @@ ReactDOM.render(
         </Button>
       </Input.Group>
     </Form.Item>
-  </Form>,
-  mountNode,
+  </Form>
 );
 ```
diff --git a/components/auto-complete/demo/non-case-sensitive.md b/components/auto-complete/demo/non-case-sensitive.md
index ac8a04a2a6..6c704093a9 100644
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@@ -33,5 +33,5 @@ const Complete: React.FC = () => (
   />
 );
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md
index 0ebcf71843..9947fc254f 100644
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -41,5 +41,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
diff --git a/components/auto-complete/demo/status.md b/components/auto-complete/demo/status.md
index 2656c13faf..75c239f93a 100644
--- a/components/auto-complete/demo/status.md
+++ b/components/auto-complete/demo/status.md
@@ -38,5 +38,5 @@ const ValidateInputs: React.FC = () => {
   );
 };
 
-ReactDOM.render(<ValidateInputs />, mountNode);
+export default () => <ValidateInputs />;
 ```
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index 65b6e9a08f..c6af144927 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -77,5 +77,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
diff --git a/components/avatar/SizeContext.tsx b/components/avatar/SizeContext.tsx
index 50e90345b0..bb763a4a60 100644
--- a/components/avatar/SizeContext.tsx
+++ b/components/avatar/SizeContext.tsx
@@ -7,6 +7,7 @@ const SizeContext = React.createContext<AvatarSize>('default');
 
 export interface SizeContextProps {
   size?: AvatarSize;
+  children?: React.ReactNode;
 }
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
diff --git a/components/avatar/__tests__/Avatar.test.js b/components/avatar/__tests__/Avatar.test.js
index a65782dba0..1826e2e980 100644
--- a/components/avatar/__tests__/Avatar.test.js
+++ b/components/avatar/__tests__/Avatar.test.js
@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -144,9 +146,10 @@ describe('Avatar Render', () => {
 
   it('should warning when pass a string as icon props', () => {
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Avatar size={64} icon="aa" />);
+    render(<Avatar size={64} icon="aa" />);
     expect(warnSpy).not.toHaveBeenCalled();
-    mount(<Avatar size={64} icon="user" />);
+
+    render(<Avatar size={64} icon="user" />);
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Avatar] \`icon\` is using ReactNode instead of string naming in v4. Please check \`user\` at https://ant.design/components/icon`,
     );
diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md
index a961f8fc4f..cc1b7f0edf 100644
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@@ -17,7 +17,7 @@ Usually used for reminders and notifications.
 import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <span className="avatar-item">
       <Badge count={1}>
@@ -29,8 +29,7 @@ ReactDOM.render(
         <Avatar shape="square" icon={<UserOutlined />} />
       </Badge>
     </span>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md
index 97bcecd468..3e27611784 100644
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@@ -17,7 +17,7 @@ Three sizes and two shapes are available.
 import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <div>
       <Avatar size={64} icon={<UserOutlined />} />
@@ -31,8 +31,7 @@ ReactDOM.render(
       <Avatar shape="square" icon={<UserOutlined />} />
       <Avatar shape="square" size="small" icon={<UserOutlined />} />
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md
index d4cc16297a..64facd6243 100644
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@@ -53,5 +53,5 @@ const Autoset: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Autoset />, mountNode);
+export default () => <Autoset />;
 ```
diff --git a/components/avatar/demo/fallback.md b/components/avatar/demo/fallback.md
index b045f1c8fb..19f7437d75 100644
--- a/components/avatar/demo/fallback.md
+++ b/components/avatar/demo/fallback.md
@@ -17,7 +17,7 @@ debug: true
 ```tsx
 import { Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       A
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       ABC
     </Avatar>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/avatar/demo/group.md b/components/avatar/demo/group.md
index 6bda01110c..046bdd2b16 100644
--- a/components/avatar/demo/group.md
+++ b/components/avatar/demo/group.md
@@ -66,5 +66,5 @@ const Demo = () => (
   </>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/avatar/demo/responsive.md b/components/avatar/demo/responsive.md
index 5c12da64fc..578022207e 100644
--- a/components/avatar/demo/responsive.md
+++ b/components/avatar/demo/responsive.md
@@ -17,11 +17,10 @@ Avatar size can be automatically adjusted based on the screen size.
 import { Avatar } from 'antd';
 import { AntDesignOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Avatar
     size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
     icon={<AntDesignOutlined />}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/avatar/demo/toggle-debug.md b/components/avatar/demo/toggle-debug.md
index 3dc1866c68..695a8b9c20 100644
--- a/components/avatar/demo/toggle-debug.md
+++ b/components/avatar/demo/toggle-debug.md
@@ -71,5 +71,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
index f2ae2df174..2eec417a71 100644
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@@ -17,7 +17,7 @@ Image, Icon and letter are supported, and the latter two kinds of avatar can hav
 import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Avatar icon={<UserOutlined />} />
     <Avatar>U</Avatar>
@@ -26,8 +26,7 @@ ReactDOM.render(
     <Avatar src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
index 9746de997b..b02bdf9013 100644
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -16,14 +16,13 @@ The most basic usage.
 ```jsx
 import { BackTop } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <BackTop />
     Scroll down to see the bottom-right
     <strong className="site-back-top-basic"> gray </strong>
     button.
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md
index c85c90a202..5195bf4bd3 100644
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -28,7 +28,7 @@ const style = {
   fontSize: 14,
 };
 
-ReactDOM.render(
+export default () => (
   <div style={{ height: '600vh', padding: 8 }}>
     <div>Scroll to bottom</div>
     <div>Scroll to bottom</div>
@@ -40,7 +40,6 @@ ReactDOM.render(
     <BackTop>
       <div style={style}>UP</div>
     </BackTop>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 26cf697437..74a88cf049 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -17,7 +17,7 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 import { Badge, Avatar } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={5}>
       <Avatar shape="square" size="large" />
@@ -28,8 +28,7 @@ ReactDOM.render(
     <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index e824cff023..f4b0874d4b 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -74,5 +74,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/badge/demo/colorful.md b/components/badge/demo/colorful.md
index f5d142533a..870cfdc22f 100644
--- a/components/badge/demo/colorful.md
+++ b/components/badge/demo/colorful.md
@@ -32,7 +32,7 @@ const colors = [
   'lime',
 ];
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -52,8 +52,7 @@ ReactDOM.render(
       <br />
       <Badge color="#108ee9" text="#108ee9" />
     </>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index 10c3cb58a5..747a37f96f 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -17,7 +17,7 @@ This will simply display a red badge, without a specific count. If count equals
 import { Badge } from 'antd';
 import { NotificationOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge dot>
       <NotificationOutlined style={{ fontSize: 16 }} />
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index 87adefca8c..b89d6276c1 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -16,12 +16,11 @@ The badge can be wrapped with `a` tag to make it linkable.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <a href="#">
     <Badge count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </a>,
-  mountNode,
+  </a>
 );
 ```
diff --git a/components/badge/demo/mix.md b/components/badge/demo/mix.md
index ca246b4fb6..4daa7c3206 100644
--- a/components/badge/demo/mix.md
+++ b/components/badge/demo/mix.md
@@ -17,7 +17,7 @@ Using `count/dot` with custom `stauts/color`.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={5} status="success">
       <Avatar shape="square" size="large" />
@@ -43,7 +43,6 @@ ReactDOM.render(
     <Badge dot color="#fa541c">
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index 075898c51d..8bdf0798c8 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -36,5 +36,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/badge/demo/offset.md b/components/badge/demo/offset.md
index 418aea9125..c8cc9329c5 100644
--- a/components/badge/demo/offset.md
+++ b/components/badge/demo/offset.md
@@ -16,10 +16,9 @@ Set offset of the badge dot, the format is `[left, top]`, which represents the o
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Badge count={5} offset={[10, 10]}>
     <Avatar shape="square" size="large" />
-  </Badge>,
-  mountNode,
+  </Badge>
 );
 ```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 63e029e4f4..3604e06442 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={99}>
       <Avatar shape="square" size="large" />
@@ -30,7 +30,6 @@ ReactDOM.render(
     <Badge count={1000} overflowCount={999}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/badge/demo/ribbbon.md b/components/badge/demo/ribbbon.md
index 048ee2fb56..ae29f585ba 100644
--- a/components/badge/demo/ribbbon.md
+++ b/components/badge/demo/ribbbon.md
@@ -16,7 +16,7 @@ Use ribbon badge.
 ```jsx
 import { Badge, Card } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge.Ribbon text="Hippies">
       <Card title="Pushes open the window" size="small">
@@ -58,8 +58,7 @@ ReactDOM.render(
         and raises the spyglass.
       </Card>
     </Badge.Ribbon>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/badge/demo/ribbon-debug.md b/components/badge/demo/ribbon-debug.md
index c540fd9dc8..3d7b02ac2e 100644
--- a/components/badge/demo/ribbon-debug.md
+++ b/components/badge/demo/ribbon-debug.md
@@ -17,7 +17,7 @@ Buggy!
 ```jsx
 import { Badge, Card, Space } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <Badge.Ribbon text="啦啦啦啦">
       <Card>推开窗户举起望远镜</Card>
@@ -34,7 +34,6 @@ ReactDOM.render(
     <Badge.Ribbon text="啦啦啦啦" color="#2db7f5" placement="end">
       <Card>推开窗户举起望远镜</Card>
     </Badge.Ribbon>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/badge/demo/size.md b/components/badge/demo/size.md
index f9d4877f8b..72594de80e 100644
--- a/components/badge/demo/size.md
+++ b/components/badge/demo/size.md
@@ -16,7 +16,7 @@ Set size of numeral Badge.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge size="default" count={5}>
       <Avatar shape="square" size="large" />
@@ -24,7 +24,6 @@ ReactDOM.render(
     <Badge size="small" count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index f0e9b47765..8648e5e34b 100644
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -16,7 +16,7 @@ Standalone badge with status.
 ```jsx
 import { Badge } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge status="success" />
     <Badge status="error" />
@@ -33,7 +33,6 @@ ReactDOM.render(
     <Badge status="processing" text="Processing" />
     <br />
     <Badge status="warning" text="Warning" />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
index d585c59174..db12a67c6d 100644
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@@ -17,7 +17,7 @@ The badge will display `title` when hovered over, instead of `count`.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={5} title="Custom hover text">
       <Avatar shape="square" size="large" />
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Badge count={-5} title="Negative">
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index 99ff056346..284c4f089e 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -34,6 +34,7 @@ export interface BadgeProps {
   size?: 'default' | 'small';
   offset?: [number | string, number | string];
   title?: string;
+  children?: React.ReactNode;
 }
 
 const Badge: CompoundedComponent = ({
diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less
index bfe948c962..276a6ef6ea 100644
--- a/components/badge/style/rtl.less
+++ b/components/badge/style/rtl.less
@@ -31,15 +31,13 @@
     }
   }
 
-  &-zoom-appear,
-  &-zoom-enter {
-    .@{badge-prefix-cls}-rtl & {
+  &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
+    .@{badge-prefix-cls}-zoom-appear,
+    .@{badge-prefix-cls}-zoom-enter {
       animation-name: antZoomBadgeInRtl;
     }
-  }
 
-  &-zoom-leave {
-    .@{badge-prefix-cls}-rtl & {
+    .@{badge-prefix-cls}-zoom-leave {
       animation-name: antZoomBadgeOutRtl;
     }
   }
@@ -79,7 +77,6 @@
   }
 }
 
-
 @keyframes antZoomBadgeInRtl {
   0% {
     transform: scale(0) translate(-50%, -50%);
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index 393644c788..7b9f3c6b25 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -27,6 +27,7 @@ export interface BreadcrumbProps {
   ) => React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
+  children?: React.ReactNode;
 }
 
 function getBreadcrumbName(route: Route, params: any) {
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index ad369c0b23..8bb51273c9 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -12,6 +12,7 @@ export interface BreadcrumbItemProps {
   dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   className?: string;
+  children?: React.ReactNode;
 }
 interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
   __ANT_BREADCRUMB_ITEM: boolean;
diff --git a/components/breadcrumb/BreadcrumbSeparator.tsx b/components/breadcrumb/BreadcrumbSeparator.tsx
index ac966f8cbc..9b5f034a38 100644
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/components/breadcrumb/BreadcrumbSeparator.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
-interface BreadcrumbSeparatorInterface extends React.FC {
+interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
   __ANT_BREADCRUMB_SEPARATOR: boolean;
 }
 
diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js
index 92f73b3d3f..bae5f3bfd7 100644
--- a/components/breadcrumb/__tests__/Breadcrumb.test.js
+++ b/components/breadcrumb/__tests__/Breadcrumb.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Breadcrumb from '../index';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -23,7 +25,7 @@ describe('Breadcrumb', () => {
   // https://github.com/airbnb/enzyme/issues/875
   it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
     const MyCom = () => <div>foo</div>;
-    mount(
+    render(
       <Breadcrumb>
         <MyCom />
       </Breadcrumb>,
@@ -36,7 +38,7 @@ describe('Breadcrumb', () => {
 
   // https://github.com/ant-design/ant-design/issues/5015
   it('should allow Breadcrumb.Item is null or undefined', () => {
-    const wrapper = render(
+    const { asFragment } = render(
       <Breadcrumb>
         {null}
         <Breadcrumb.Item>Home</Breadcrumb.Item>
@@ -44,24 +46,24 @@ describe('Breadcrumb', () => {
       </Breadcrumb>,
     );
     expect(errorSpy).not.toHaveBeenCalled();
-    expect(wrapper).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/5542
   it('should not display Breadcrumb Item when its children is falsy', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb>
         <Breadcrumb.Item />
         <Breadcrumb.Item>xxx</Breadcrumb.Item>
         <Breadcrumb.Item>yyy</Breadcrumb.Item>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/18260
   it('filter React.Fragment', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb separator="">
         <Breadcrumb.Item>Location</Breadcrumb.Item>
         <Breadcrumb.Separator>:</Breadcrumb.Separator>
@@ -71,7 +73,7 @@ describe('Breadcrumb', () => {
         </>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should render a menu', () => {
@@ -106,27 +108,27 @@ describe('Breadcrumb', () => {
         path: 'third',
       },
     ];
-    const wrapper = render(<Breadcrumb routes={routes} />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(<Breadcrumb routes={routes} />);
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should accept undefined routes', () => {
-    const wrapper = render(<Breadcrumb routes={undefined} />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(<Breadcrumb routes={undefined} />);
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should support custom attribute', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb data-custom="custom">
         <Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
         <Breadcrumb.Item>yyy</Breadcrumb.Item>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should support React.Fragment and falsy children', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb>
         <>
           <Breadcrumb.Item>yyy</Breadcrumb.Item>
@@ -138,7 +140,7 @@ describe('Breadcrumb', () => {
         {undefined}
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/25975
@@ -148,13 +150,13 @@ describe('Breadcrumb', () => {
         <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
       </span>
     );
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb>
         <Breadcrumb.Item>Location</Breadcrumb.Item>
         <MockComponent />
         <Breadcrumb.Item>Application Center</Breadcrumb.Item>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
index 63c31aa564..25463c2292 100644
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -16,7 +16,7 @@ The simplest use.
 ```jsx
 import { Breadcrumb } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -26,7 +26,6 @@ ReactDOM.render(
       <a href="">Application List</a>
     </Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```
diff --git a/components/breadcrumb/demo/overlay.md b/components/breadcrumb/demo/overlay.md
index c6283a2ad4..e23c852e59 100644
--- a/components/breadcrumb/demo/overlay.md
+++ b/components/breadcrumb/demo/overlay.md
@@ -44,7 +44,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -54,7 +54,6 @@ ReactDOM.render(
       <a href="">General</a>
     </Breadcrumb.Item>
     <Breadcrumb.Item>Button</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```
diff --git a/components/breadcrumb/demo/react-router.md b/components/breadcrumb/demo/react-router.md
index 131f7f27dc..472cd7735d 100644
--- a/components/breadcrumb/demo/react-router.md
+++ b/components/breadcrumb/demo/react-router.md
@@ -69,11 +69,10 @@ const Home = props => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <HashRouter>
     <Home />
-  </HashRouter>,
-  mountNode,
+  </HashRouter>
 );
 ```
 
diff --git a/components/breadcrumb/demo/separator-component.md b/components/breadcrumb/demo/separator-component.md
index f889d49a51..83dad51b54 100644
--- a/components/breadcrumb/demo/separator-component.md
+++ b/components/breadcrumb/demo/separator-component.md
@@ -16,7 +16,7 @@ The separator can be customized by setting the separator property: `Breadcrumb.S
 ```jsx
 import { Breadcrumb } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb separator="">
     <Breadcrumb.Item>Location</Breadcrumb.Item>
     <Breadcrumb.Separator>:</Breadcrumb.Separator>
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
     <Breadcrumb.Separator />
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
index 9798c7b6e7..6147da3c06 100644
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -16,13 +16,12 @@ The separator can be customized by setting the separator property: `separator=">
 ```jsx
 import { Breadcrumb } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb separator=">">
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```
diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md
index 8b5c9c0254..37318de92a 100644
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -17,7 +17,7 @@ The icon should be placed in front of the text.
 import { Breadcrumb } from 'antd';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item href="">
       <HomeOutlined />
@@ -27,7 +27,6 @@ ReactDOM.render(
       <span>Application List</span>
     </Breadcrumb.Item>
     <Breadcrumb.Item>Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```
diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
index 50453ee104..f34dcaf2f3 100644
--- a/components/button/__tests__/index.test.tsx
+++ b/components/button/__tests__/index.test.tsx
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -39,7 +41,7 @@ describe('Button', () => {
     const mockWarn = jest.fn();
     jest.spyOn(console, 'warn').mockImplementation(mockWarn);
     const size = 'who am I' as any as SizeType;
-    render(<Button.Group size={size} />);
+    mount(<Button.Group size={size} />);
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toMatchObject({
       message: 'unreachable case: "who am I"',
@@ -51,12 +53,14 @@ describe('Button', () => {
     // should not insert space when there is icon
     expect(mount(<Button icon={<SearchOutlined />}>按钮</Button>).render()).toMatchSnapshot();
     // should not insert space when there is icon
-    expect(mount(
-      <Button>
-        <SearchOutlined />
-        按钮
-      </Button>,
-    ).render()).toMatchSnapshot();
+    expect(
+      mount(
+        <Button>
+          <SearchOutlined />
+          按钮
+        </Button>,
+      ).render(),
+    ).toMatchSnapshot();
     // should not insert space when there is icon
     expect(mount(<Button icon={<SearchOutlined />}>按钮</Button>).render()).toMatchSnapshot();
     // should not insert space when there is icon while loading
@@ -261,12 +265,15 @@ describe('Button', () => {
   it('should warning when pass a string as icon props', () => {
     resetWarned();
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Button type="primary" icon="ab" />);
+
+    render(<Button type="primary" icon="ab" />);
     expect(warnSpy).not.toHaveBeenCalled();
-    mount(<Button type="primary" icon="search" />);
+
+    render(<Button type="primary" icon="search" />);
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Button] \`icon\` is using ReactNode instead of string naming in v4. Please check \`search\` at https://ant.design/components/icon`,
     );
+
     warnSpy.mockRestore();
   });
 
diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index bb0531ab81..3874c48e79 100644
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -9,6 +9,7 @@ export interface ButtonGroupProps {
   style?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
+  children?: React.ReactNode;
 }
 
 const ButtonGroup: React.FC<ButtonGroupProps> = props => (
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index 974fbb514b..d90e609e46 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -16,7 +16,7 @@ There are `primary` button, `default` button, `dashed` button, `text` button and
 ```jsx
 import { Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
@@ -24,7 +24,6 @@ ReactDOM.render(
     <br />
     <Button type="text">Text Button</Button>
     <Button type="link">Link Button</Button>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/button/demo/block.md b/components/button/demo/block.md
index 73d405021c..443c9320a9 100644
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Button type="primary" block>
       Primary
@@ -28,7 +28,6 @@ ReactDOM.render(
     <Button type="link" block>
       Link
     </Button>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/button/demo/danger.md b/components/button/demo/danger.md
index dd7167e6a1..fefa96da59 100644
--- a/components/button/demo/danger.md
+++ b/components/button/demo/danger.md
@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Button type="primary" danger>
       Primary
@@ -31,7 +31,6 @@ ReactDOM.render(
     <Button type="link" danger>
       Link
     </Button>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index b661f545d5..018316b108 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -16,7 +16,7 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
 ```jsx
 import { Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Button type="primary">Primary</Button>
     <Button type="primary" disabled>
@@ -65,8 +65,7 @@ ReactDOM.render(
         Ghost(disabled)
       </Button>
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 329fb1f6eb..ba86db0f3d 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
@@ -28,8 +28,7 @@ ReactDOM.render(
     <Button type="primary" danger ghost>
       Danger
     </Button>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index e26b3c5e21..c17bd4dacf 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -21,7 +21,7 @@ If you want specific control over the positioning and placement of the `Icon`, t
 import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Tooltip title="search">
       <Button type="primary" shape="circle" icon={<SearchOutlined />} />
@@ -79,7 +79,6 @@ ReactDOM.render(
       Search
     </Button>
     <Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/button/demo/legacy-group.md b/components/button/demo/legacy-group.md
index c4fb32ff8c..54a027dff0 100644
--- a/components/button/demo/legacy-group.md
+++ b/components/button/demo/legacy-group.md
@@ -35,15 +35,14 @@ function getGroup(props) {
   );
 }
 
-ReactDOM.render(
+export default () => (
   <>
     {getGroup({ size: 'small' })}
     <br />
     {getGroup()}
     <br />
     {getGroup({ size: 'large' })}
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index 72e2c8cfd0..cfa6c42b6c 100644
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -81,5 +81,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index 45da2f4690..71cccf6c02 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -40,12 +40,11 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <Button type="primary">primary</Button>
     <Button>secondary</Button>
     <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 625da00864..77d4e8eb37 100644
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -67,5 +67,5 @@ class ButtonSize extends React.Component {
   }
 }
 
-ReactDOM.render(<ButtonSize />, mountNode);
+export default () => <ButtonSize />;
 ```
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
index 0e8a602e6d..89a3fdb1c4 100644
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -20,5 +20,5 @@ function onPanelChange(value, mode) {
   console.log(value.format('YYYY-MM-DD'), mode);
 }
 
-ReactDOM.render(<Calendar onPanelChange={onPanelChange} />, mountNode);
+export default () => <Calendar onPanelChange={onPanelChange} />;
 ```
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
index cdb25c2065..4050c39d8c 100644
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@@ -20,11 +20,10 @@ function onPanelChange(value, mode) {
   console.log(value, mode);
 }
 
-ReactDOM.render(
+export default () => (
   <div className="site-calendar-demo-card">
     <Calendar fullscreen={false} onPanelChange={onPanelChange} />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
index 01e103a33c..1b8dc6c798 100644
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@@ -20,7 +20,7 @@ function onPanelChange(value, mode) {
   console.log(value, mode);
 }
 
-ReactDOM.render(
+export default () => (
   <div className="site-calendar-customize-header-wrapper">
     <Calendar
       fullscreen={false}
@@ -99,8 +99,7 @@ ReactDOM.render(
       }}
       onPanelChange={onPanelChange}
     />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index 512a83e277..7303412f7f 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -76,10 +76,7 @@ function monthCellRender(value) {
   ) : null;
 }
 
-ReactDOM.render(
-  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
-  mountNode,
-);
+export default () => <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
 ```
 
 ```css
diff --git a/components/calendar/demo/select.md b/components/calendar/demo/select.md
index 2dc438bc44..ba04d2134d 100644
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@@ -47,5 +47,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index e9c99564ae..e9a909a8bd 100644
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -16,7 +16,7 @@ A basic card containing a title, content and an extra corner content. Supports t
 ```jsx
 import { Card } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
       <p>Card content</p>
@@ -28,8 +28,7 @@ ReactDOM.render(
       <p>Card content</p>
       <p>Card content</p>
     </Card>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index ca4f30e95e..4e471eaf93 100644
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -16,15 +16,14 @@ A borderless card on a gray background.
 ```jsx
 import { Card } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div className="site-card-border-less-wrapper">
     <Card title="Card title" bordered={false} style={{ width: 300 }}>
       <p>Card content</p>
       <p>Card content</p>
       <p>Card content</p>
     </Card>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/card/demo/flexible-content.md b/components/card/demo/flexible-content.md
index 6352dbbd7e..99f9923ceb 100644
--- a/components/card/demo/flexible-content.md
+++ b/components/card/demo/flexible-content.md
@@ -18,14 +18,13 @@ import { Card } from 'antd';
 
 const { Meta } = Card;
 
-ReactDOM.render(
+export default () => (
   <Card
     hoverable
     style={{ width: 240 }}
     cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
   >
     <Meta title="Europe Street beat" description="www.instagram.com" />
-  </Card>,
-  mountNode,
+  </Card>
 );
 ```
diff --git a/components/card/demo/grid-card.md b/components/card/demo/grid-card.md
index d98a2973f2..af138b31ea 100644
--- a/components/card/demo/grid-card.md
+++ b/components/card/demo/grid-card.md
@@ -21,7 +21,7 @@ const gridStyle = {
   textAlign: 'center',
 };
 
-ReactDOM.render(
+export default () => (
   <Card title="Card Title">
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid hoverable={false} style={gridStyle}>
@@ -32,7 +32,6 @@ ReactDOM.render(
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
-  </Card>,
-  mountNode,
+  </Card>
 );
 ```
diff --git a/components/card/demo/in-column.md b/components/card/demo/in-column.md
index a20fed7021..ce39d8f02a 100644
--- a/components/card/demo/in-column.md
+++ b/components/card/demo/in-column.md
@@ -16,7 +16,7 @@ Cards usually cooperate with grid column layout in overview page.
 ```jsx
 import { Card, Col, Row } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div className="site-card-wrapper">
     <Row gutter={16}>
       <Col span={8}>
@@ -35,8 +35,7 @@ ReactDOM.render(
         </Card>
       </Col>
     </Row>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/card/demo/inner.md b/components/card/demo/inner.md
index 8bbc8761ff..9923546784 100644
--- a/components/card/demo/inner.md
+++ b/components/card/demo/inner.md
@@ -16,7 +16,7 @@ It can be placed inside the ordinary card to display the information of the mult
 ```jsx
 import { Card } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Card title="Card title">
     <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
       Inner Card content
@@ -29,7 +29,6 @@ ReactDOM.render(
     >
       Inner Card content
     </Card>
-  </Card>,
-  mountNode,
+  </Card>
 );
 ```
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index c9b7deb875..ed15059d75 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -64,5 +64,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/card/demo/meta.md b/components/card/demo/meta.md
index a4531960fd..8b90c8f10e 100644
--- a/components/card/demo/meta.md
+++ b/components/card/demo/meta.md
@@ -19,7 +19,7 @@ import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/ico
 
 const { Meta } = Card;
 
-ReactDOM.render(
+export default () => (
   <Card
     style={{ width: 300 }}
     cover={
@@ -39,7 +39,6 @@ ReactDOM.render(
       title="Card title"
       description="This is the description"
     />
-  </Card>,
-  mountNode,
+  </Card>
 );
 ```
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index cb378c7741..95737a5635 100644
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -16,12 +16,11 @@ A simple card only containing a content area.
 ```jsx
 import { Card } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Card style={{ width: 300 }}>
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
-  </Card>,
-  mountNode,
+  </Card>
 );
 ```
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md
index 09821369a9..4416f2eb72 100644
--- a/components/card/demo/tabs.md
+++ b/components/card/demo/tabs.md
@@ -96,5 +96,5 @@ const TabsCard = () => {
   );
 };
 
-ReactDOM.render(<TabsCard />, mountNode);
+export default () => <TabsCard />;
 ```
diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
index 72f803eedf..e928a3c0c6 100644
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -24,7 +24,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-ReactDOM.render(
+export default () => (
   <Carousel autoplay>
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -38,7 +38,6 @@ ReactDOM.render(
     <div>
       <h3 style={contentStyle}>4</h3>
     </div>
-  </Carousel>,
-  mountNode,
+  </Carousel>
 );
 ```
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
index fd2334d3cf..36f8031e7d 100644
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -28,7 +28,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-ReactDOM.render(
+export default () => (
   <Carousel afterChange={onChange}>
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -42,7 +42,6 @@ ReactDOM.render(
     <div>
       <h3 style={contentStyle}>4</h3>
     </div>
-  </Carousel>,
-  mountNode,
+  </Carousel>
 );
 ```
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
index cc4a0cfb2b..fb472acb16 100644
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -24,7 +24,7 @@ const contentStyle = {
   background: '#364d79',
 };
 
-ReactDOM.render(
+export default () => (
   <Carousel effect="fade">
     <div>
       <h3 style={contentStyle}>1</h3>
@@ -38,7 +38,6 @@ ReactDOM.render(
     <div>
       <h3 style={contentStyle}>4</h3>
     </div>
-  </Carousel>,
-  mountNode,
+  </Carousel>
 );
 ```
diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md
index e7ee9277d7..d64d9c47ed 100644
--- a/components/carousel/demo/position.md
+++ b/components/carousel/demo/position.md
@@ -57,5 +57,5 @@ const PositionCarouselDemo = () => {
   );
 };
 
-ReactDOM.render(<PositionCarouselDemo />, mountNode);
+export default () => <PositionCarouselDemo />;
 ```
diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md
index 4a563b114f..15457da1c6 100644
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@@ -55,8 +55,5 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
-  <Cascader options={options} onChange={onChange} placeholder="Please select" />,
-  mountNode,
-);
+export default () => <Cascader options={options} onChange={onChange} placeholder="Please select" />;
 ```
diff --git a/components/cascader/demo/change-on-select.md b/components/cascader/demo/change-on-select.md
index 0c1e408a1a..d262965906 100644
--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@@ -55,5 +55,5 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(<Cascader options={options} onChange={onChange} changeOnSelect />, mountNode);
+export default () => <Cascader options={options} onChange={onChange} changeOnSelect />;
 ```
diff --git a/components/cascader/demo/custom-dropdown.md b/components/cascader/demo/custom-dropdown.md
index 33f366ff90..882d0a0878 100644
--- a/components/cascader/demo/custom-dropdown.md
+++ b/components/cascader/demo/custom-dropdown.md
@@ -61,8 +61,7 @@ function dropdownRender(menus) {
   );
 }
 
-ReactDOM.render(
-  <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />,
-  mountNode,
+export default () => (
+  <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />
 );
 ```
diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md
index 574d0f9068..ca83da29ec 100644
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -71,13 +71,12 @@ const displayRender = (labels, selectedOptions) =>
     return <span key={option.value}>{label} / </span>;
   });
 
-ReactDOM.render(
+export default () => (
   <Cascader
     options={options}
     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
     displayRender={displayRender}
     style={{ width: '100%' }}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md
index ffd79d095f..c6cf0d2374 100644
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@@ -63,5 +63,5 @@ class CitySwitcher extends React.Component {
   }
 }
 
-ReactDOM.render(<CitySwitcher />, mountNode);
+export default () => <CitySwitcher />;
 ```
diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md
index 724bab6abd..d686898823 100644
--- a/components/cascader/demo/default-value.md
+++ b/components/cascader/demo/default-value.md
@@ -55,12 +55,7 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
-  <Cascader
-    defaultValue={['zhejiang', 'hangzhou', 'xihu']}
-    options={options}
-    onChange={onChange}
-  />,
-  mountNode,
+export default () => (
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
 );
 ```
diff --git a/components/cascader/demo/disabled-option.md b/components/cascader/demo/disabled-option.md
index 40cb7b7185..ed75ab3221 100644
--- a/components/cascader/demo/disabled-option.md
+++ b/components/cascader/demo/disabled-option.md
@@ -56,5 +56,5 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(<Cascader options={options} onChange={onChange} />, mountNode);
+export default () => <Cascader options={options} onChange={onChange} />;
 ```
diff --git a/components/cascader/demo/fields-name.md b/components/cascader/demo/fields-name.md
index e29b61a5bd..1eea655c16 100644
--- a/components/cascader/demo/fields-name.md
+++ b/components/cascader/demo/fields-name.md
@@ -55,13 +55,12 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
+export default () => (
   <Cascader
     fieldNames={{ label: 'name', value: 'code', children: 'items' }}
     options={options}
     onChange={onChange}
     placeholder="Please select"
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md
index 59253b3438..10e478af3f 100644
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -60,13 +60,12 @@ function displayRender(label) {
   return label[label.length - 1];
 }
 
-ReactDOM.render(
+export default () => (
   <Cascader
     options={options}
     expandTrigger="hover"
     displayRender={displayRender}
     onChange={onChange}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md
index fc71bb74e3..e13c736f31 100644
--- a/components/cascader/demo/lazy.md
+++ b/components/cascader/demo/lazy.md
@@ -64,5 +64,5 @@ const LazyOptions = () => {
   return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
 };
 
-ReactDOM.render(<LazyOptions />, mountNode);
+export default () => <LazyOptions />;
 ```
diff --git a/components/cascader/demo/multiple.md b/components/cascader/demo/multiple.md
index 72147dec6b..c8fda11503 100644
--- a/components/cascader/demo/multiple.md
+++ b/components/cascader/demo/multiple.md
@@ -66,5 +66,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/cascader/demo/placement.md b/components/cascader/demo/placement.md
index 21a7a19caf..6f542aa2ed 100644
--- a/components/cascader/demo/placement.md
+++ b/components/cascader/demo/placement.md
@@ -73,5 +73,5 @@ const SetPlacementDemo = () => {
   );
 };
 
-ReactDOM.render(<SetPlacementDemo />, mountNode);
+export default () => <SetPlacementDemo />;
 ```
diff --git a/components/cascader/demo/search.md b/components/cascader/demo/search.md
index d9f45ca3f1..74178663ff 100644
--- a/components/cascader/demo/search.md
+++ b/components/cascader/demo/search.md
@@ -68,14 +68,13 @@ function filter(inputValue, path) {
   return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 }
 
-ReactDOM.render(
+export default () => (
   <Cascader
     options={options}
     onChange={onChange}
     placeholder="Please select"
     showSearch={{ filter }}
     onSearch={value => console.log(value)}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/cascader/demo/size.md b/components/cascader/demo/size.md
index 6d61f7168c..6a17c7eb21 100644
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@@ -55,7 +55,7 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Cascader size="large" options={options} onChange={onChange} />
     <br />
@@ -66,7 +66,6 @@ ReactDOM.render(
     <Cascader size="small" options={options} onChange={onChange} />
     <br />
     <br />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/cascader/demo/status.md b/components/cascader/demo/status.md
index 694e092cd3..6a62a82a96 100644
--- a/components/cascader/demo/status.md
+++ b/components/cascader/demo/status.md
@@ -24,5 +24,5 @@ const Validation: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<Validation />, mountNode);
+export default () => <Validation />;
 ```
diff --git a/components/cascader/demo/suffix.md b/components/cascader/demo/suffix.md
index e426bc9f3f..56c99bc157 100644
--- a/components/cascader/demo/suffix.md
+++ b/components/cascader/demo/suffix.md
@@ -57,7 +57,7 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Cascader
       suffixIcon={<SmileOutlined />}
@@ -79,7 +79,6 @@ ReactDOM.render(
     <br />
     <br />
     <Cascader expandIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 315a724759..522b1102b6 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -114,6 +114,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
   const checkboxClass = classNames({
     [`${prefixCls}-indeterminate`]: indeterminate,
   });
+  const ariaChecked = indeterminate ? 'mixed' : undefined;
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label
@@ -122,7 +123,13 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <RcCheckbox {...checkboxProps} prefixCls={prefixCls} className={checkboxClass} ref={ref} />
+      <RcCheckbox
+        aria-checked={ariaChecked}
+        {...checkboxProps}
+        prefixCls={prefixCls}
+        className={checkboxClass}
+        ref={ref}
+      />
       {children !== undefined && <span>{children}</span>}
     </label>
   );
diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 08e3d68742..5271081f95 100644
--- a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -30,6 +30,7 @@ Array [
       class="ant-checkbox ant-checkbox-indeterminate"
     >
       <input
+        aria-checked="mixed"
         class="ant-checkbox-input"
         type="checkbox"
       />
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
index 2ca1a2d0ed..4261f83365 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -30,6 +30,7 @@ Array [
       class="ant-checkbox ant-checkbox-indeterminate"
     >
       <input
+        aria-checked="mixed"
         class="ant-checkbox-input"
         type="checkbox"
       />
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index 30b49016f5..b6f6a92539 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -20,5 +20,5 @@ function onChange(e) {
   console.log(`checked = ${e.target.checked}`);
 }
 
-ReactDOM.render(<Checkbox onChange={onChange}>Checkbox</Checkbox>, mountNode);
+export default () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;
 ```
diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md
index d0ea81a5cc..508406ae6d 100644
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -49,5 +49,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index 3bfffc342a..d8463a28df 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -70,5 +70,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/checkbox/demo/debug-line.md b/components/checkbox/demo/debug-line.md
index dbfe6903be..b5f6fe4531 100644
--- a/components/checkbox/demo/debug-line.md
+++ b/components/checkbox/demo/debug-line.md
@@ -22,7 +22,7 @@ const sharedStyle: React.CSSProperties = {
   marginBottom: 16,
 };
 
-ReactDOM.render(
+export default () => (
   <div>
     <Space style={sharedStyle} align="center">
       <Checkbox value="light" />
@@ -59,7 +59,6 @@ ReactDOM.render(
       <div>Bamboo</div>
       <Radio value="little">Little</Radio>
     </div>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
index db131b114e..82deca4926 100644
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -16,12 +16,11 @@ Disabled checkbox.
 ```jsx
 import { Checkbox } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Checkbox defaultChecked={false} disabled />
     <br />
     <Checkbox defaultChecked disabled />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index 4c19285c3e..e0d2db5579 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -32,7 +32,7 @@ const optionsWithDisabled = [
   { label: 'Orange', value: 'Orange', disabled: false },
 ];
 
-ReactDOM.render(
+export default () => (
   <>
     <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
     <br />
@@ -46,7 +46,6 @@ ReactDOM.render(
       defaultValue={['Apple']}
       onChange={onChange}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/checkbox/demo/layout.md b/components/checkbox/demo/layout.md
index 7d068a6f05..be82a71412 100644
--- a/components/checkbox/demo/layout.md
+++ b/components/checkbox/demo/layout.md
@@ -20,7 +20,7 @@ function onChange(checkedValues) {
   console.log('checked = ', checkedValues);
 }
 
-ReactDOM.render(
+export default () => (
   <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
     <Row>
       <Col span={8}>
@@ -39,7 +39,6 @@ ReactDOM.render(
         <Checkbox value="E">E</Checkbox>
       </Col>
     </Row>
-  </Checkbox.Group>,
-  mountNode,
+  </Checkbox.Group>
 );
 ```
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index 68d3dc8f57..7a96140566 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -28,6 +28,7 @@ export interface CollapseProps {
   expandIconPosition?: ExpandIconPosition;
   ghost?: boolean;
   collapsible?: CollapsibleType;
+  children?: React.ReactNode;
 }
 
 interface PanelProps {
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index 5d09202ebb..43fcf594c3 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -24,7 +24,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Collapse accordion>
     <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
@@ -35,7 +35,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index f6cba641f3..9d2c4f55a0 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -28,7 +28,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Collapse defaultActiveKey={['1']} onChange={callback}>
     <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
@@ -39,8 +39,7 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
 
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
index 45080fc947..1449f722e5 100644
--- a/components/collapse/demo/borderless.md
+++ b/components/collapse/demo/borderless.md
@@ -25,7 +25,7 @@ const text = (
   </p>
 );
 
-ReactDOM.render(
+export default () => (
   <Collapse bordered={false} defaultActiveKey={['1']}>
     <Panel header="This is panel header 1" key="1">
       {text}
@@ -36,7 +36,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       {text}
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
diff --git a/components/collapse/demo/collapsible.md b/components/collapse/demo/collapsible.md
index 87823cd026..589ed52c15 100644
--- a/components/collapse/demo/collapsible.md
+++ b/components/collapse/demo/collapsible.md
@@ -24,7 +24,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Collapse collapsible="header" defaultActiveKey={['1']}>
       <Panel header="This panel can only be collapsed by clicking text" key="1">
@@ -36,8 +36,7 @@ ReactDOM.render(
         <p>{text}</p>
       </Panel>
     </Collapse>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
 
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index f4396d1a0b..83d0622352 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -25,7 +25,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Collapse
     bordered={false}
     defaultActiveKey={['1']}
@@ -41,8 +41,7 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3" className="site-collapse-custom-panel">
       <p>{text}</p>
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
 
diff --git a/components/collapse/demo/extra.md b/components/collapse/demo/extra.md
index a35a4e7a91..771807e063 100644
--- a/components/collapse/demo/extra.md
+++ b/components/collapse/demo/extra.md
@@ -82,5 +82,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/collapse/demo/ghost.md b/components/collapse/demo/ghost.md
index 09706f08cc..1aa8c8a939 100644
--- a/components/collapse/demo/ghost.md
+++ b/components/collapse/demo/ghost.md
@@ -24,7 +24,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Collapse defaultActiveKey={['1']} ghost>
     <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
@@ -35,7 +35,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index d7a629c352..d39031feae 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -28,7 +28,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Collapse onChange={callback}>
     <Panel header="This is panel header 1" key="1">
       <Collapse defaultActiveKey="1">
@@ -43,7 +43,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
index 9a1af55a52..64a227e7f5 100644
--- a/components/collapse/demo/noarrow.md
+++ b/components/collapse/demo/noarrow.md
@@ -28,7 +28,7 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-ReactDOM.render(
+export default () => (
   <Collapse defaultActiveKey={['1']} onChange={callback}>
     <Panel header="This is panel header with arrow icon" key="1">
       <p>{text}</p>
@@ -36,7 +36,6 @@ ReactDOM.render(
     <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
       <p>{text}</p>
     </Panel>
-  </Collapse>,
-  mountNode,
+  </Collapse>
 );
 ```
diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md
index f5669f8f59..5244569046 100644
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@@ -73,7 +73,7 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index 9c6ee8a27c..6051c50f8e 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -102,5 +102,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index 44442e95e4..5191f0f131 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -54,7 +54,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <List
     className="comment-list"
     header={`${data.length} replies`}
@@ -71,7 +71,6 @@ ReactDOM.render(
         />
       </li>
     )}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/comment/demo/nested.md b/components/comment/demo/nested.md
index 7f23fad73f..4af8d87125 100644
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@@ -32,13 +32,12 @@ const ExampleComment = ({ children }) => (
   </Comment>
 );
 
-ReactDOM.render(
+export default () => (
   <ExampleComment>
     <ExampleComment>
       <ExampleComment />
       <ExampleComment />
     </ExampleComment>
-  </ExampleComment>,
-  mountNode,
+  </ExampleComment>
 );
 ```
diff --git a/components/config-provider/SizeContext.tsx b/components/config-provider/SizeContext.tsx
index 55c40be1d8..e6ab4ceb6f 100644
--- a/components/config-provider/SizeContext.tsx
+++ b/components/config-provider/SizeContext.tsx
@@ -6,6 +6,7 @@ const SizeContext = React.createContext<SizeType>(undefined);
 
 export interface SizeContextProps {
   size?: SizeType;
+  children?: React.ReactNode;
 }
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
diff --git a/components/config-provider/__tests__/form.test.js b/components/config-provider/__tests__/form.test.js
index d8a6c4216d..f48333ba8d 100644
--- a/components/config-provider/__tests__/form.test.js
+++ b/components/config-provider/__tests__/form.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import ConfigProvider from '..';
 import zhCN from '../../locale/zh_CN';
@@ -15,10 +17,10 @@ describe('ConfigProvider.Form', () => {
   });
 
   describe('form validateMessages', () => {
-    const wrapperComponent = ({ validateMessages }) => {
+    const renderComponent = ({ validateMessages }) => {
       const formRef = React.createRef();
 
-      const wrapper = mount(
+      const { container } = render(
         <ConfigProvider locale={zhCN} form={{ validateMessages }}>
           <Form ref={formRef} initialValues={{ age: 18 }}>
             <Form.Item name="test" label="姓名" rules={[{ required: true }]}>
@@ -31,11 +33,11 @@ describe('ConfigProvider.Form', () => {
         </ConfigProvider>,
       );
 
-      return [wrapper, formRef];
+      return [container, formRef];
     };
 
     it('set locale zhCN', async () => {
-      const [wrapper, formRef] = wrapperComponent({});
+      const [container, formRef] = renderComponent({});
 
       await act(async () => {
         try {
@@ -47,15 +49,14 @@ describe('ConfigProvider.Form', () => {
 
       await act(async () => {
         jest.runAllTimers();
-        wrapper.update();
         await Promise.resolve();
       });
 
-      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('请输入姓名');
+      expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('请输入姓名');
     });
 
     it('set locale zhCN and set form validateMessages one item, other use default message', async () => {
-      const [wrapper, formRef] = wrapperComponent({ validateMessages: { required: '必须' } });
+      const [container, formRef] = renderComponent({ validateMessages: { required: '必须' } });
 
       await act(async () => {
         try {
@@ -67,12 +68,13 @@ describe('ConfigProvider.Form', () => {
 
       await act(async () => {
         jest.runAllTimers();
-        wrapper.update();
         await Promise.resolve();
       });
 
-      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('必须');
-      expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual('年龄必须等于17');
+      const explains = Array.from(container.querySelectorAll('.ant-form-item-explain'));
+
+      expect(explains[0]).toHaveTextContent('必须');
+      expect(explains[explains.length - 1]).toHaveTextContent('年龄必须等于17');
     });
   });
 
diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md
index 573e484732..e5e23b84b3 100644
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@@ -559,7 +559,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md
index b4234513a1..28e3728f72 100644
--- a/components/config-provider/demo/locale.md
+++ b/components/config-provider/demo/locale.md
@@ -165,7 +165,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/config-provider/demo/prefixCls.md b/components/config-provider/demo/prefixCls.md
index 3d9781a7cc..e5a020b083 100644
--- a/components/config-provider/demo/prefixCls.md
+++ b/components/config-provider/demo/prefixCls.md
@@ -39,5 +39,5 @@ const FormSizeDemo = () => {
     </div>
   );
 };
-ReactDOM.render(<FormSizeDemo />, mountNode);
+export default () => <FormSizeDemo />;
 ```
diff --git a/components/config-provider/demo/size.md b/components/config-provider/demo/size.md
index 457d2282f4..3fedcfedf2 100644
--- a/components/config-provider/demo/size.md
+++ b/components/config-provider/demo/size.md
@@ -111,5 +111,5 @@ const FormSizeDemo = () => {
     </div>
   );
 };
-ReactDOM.render(<FormSizeDemo />, mountNode);
+export default () => <FormSizeDemo />;
 ```
diff --git a/components/config-provider/demo/theme.md b/components/config-provider/demo/theme.md
index 163f62e03e..08ee960c6b 100644
--- a/components/config-provider/demo/theme.md
+++ b/components/config-provider/demo/theme.md
@@ -631,5 +631,5 @@ const FormSizeDemo = () => {
     </Row>
   );
 };
-ReactDOM.render(<FormSizeDemo />, mountNode);
+export default () => <FormSizeDemo />;
 ```
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
index a9bb03cea4..5507c558cc 100644
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -20,14 +20,13 @@ function onChange(date, dateString) {
   console.log(date, dateString);
 }
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <DatePicker onChange={onChange} />
     <DatePicker onChange={onChange} picker="week" />
     <DatePicker onChange={onChange} picker="month" />
     <DatePicker onChange={onChange} picker="quarter" />
     <DatePicker onChange={onChange} picker="year" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/bordered.md b/components/date-picker/demo/bordered.md
index 71a5caabd9..f73ae783a5 100644
--- a/components/date-picker/demo/bordered.md
+++ b/components/date-picker/demo/bordered.md
@@ -18,7 +18,7 @@ import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker bordered={false} />
     <DatePicker picker="week" bordered={false} />
@@ -28,7 +28,6 @@ ReactDOM.render(
     <RangePicker picker="week" bordered={false} />
     <RangePicker picker="month" bordered={false} />
     <RangePicker picker="year" bordered={false} />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/date-render.md b/components/date-picker/demo/date-render.md
index b70ba048d5..f5317b88b1 100644
--- a/components/date-picker/demo/date-render.md
+++ b/components/date-picker/demo/date-render.md
@@ -18,7 +18,7 @@ import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker
       dateRender={current => {
@@ -48,7 +48,6 @@ ReactDOM.render(
         );
       }}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index 74b87541cd..11d58bc8fb 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -55,7 +55,7 @@ function disabledRangeTime(_, type) {
   };
 }
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker
       format="YYYY-MM-DD HH:mm:ss"
@@ -74,7 +74,6 @@ ReactDOM.render(
       }}
       format="YYYY-MM-DD HH:mm:ss"
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index aefbb0a7d2..1cad077131 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -20,7 +20,7 @@ import moment from 'moment';
 const { RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY-MM-DD';
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
     <DatePicker picker="month" defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
@@ -32,7 +32,6 @@ ReactDOM.render(
       defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
       disabled={[false, true]}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/extra-footer.md b/components/date-picker/demo/extra-footer.md
index a6089b6e6f..8f2435e4df 100644
--- a/components/date-picker/demo/extra-footer.md
+++ b/components/date-picker/demo/extra-footer.md
@@ -18,14 +18,13 @@ import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker renderExtraFooter={() => 'extra footer'} />
     <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
     <RangePicker renderExtraFooter={() => 'extra footer'} />
     <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
     <DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index 04e373413d..f10777a6a3 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -32,7 +32,7 @@ const customWeekStartEndFormat = value =>
     .endOf('week')
     .format(weekFormat)}`;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
     <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
@@ -43,7 +43,6 @@ ReactDOM.render(
       format={dateFormat}
     />
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat} />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md
index e55f9e5f84..72a2465f5d 100644
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@@ -76,11 +76,10 @@ class ControlledRangePicker extends React.Component {
   }
 }
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <ControlledDatePicker />
     <ControlledRangePicker />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/placement.md b/components/date-picker/demo/placement.md
index a736924cc9..74007c7265 100644
--- a/components/date-picker/demo/placement.md
+++ b/components/date-picker/demo/placement.md
@@ -43,5 +43,5 @@ const SetPlacementDemo = () => {
   );
 };
 
-ReactDOM.render(<SetPlacementDemo />, mountNode);
+export default () => <SetPlacementDemo />;
 ```
diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md
index f76b9e2c06..8a008ce405 100644
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@@ -24,7 +24,7 @@ function onChange(dates, dateStrings) {
   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
 }
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <RangePicker
       ranges={{
@@ -42,7 +42,6 @@ ReactDOM.render(
       format="YYYY/MM/DD HH:mm:ss"
       onChange={onChange}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/range-picker.md b/components/date-picker/demo/range-picker.md
index 10d8f3ee7d..0bcdcbd528 100644
--- a/components/date-picker/demo/range-picker.md
+++ b/components/date-picker/demo/range-picker.md
@@ -18,7 +18,7 @@ import { DatePicker, Space } from 'antd';
 
 const { RangePicker } = DatePicker;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <RangePicker />
     <RangePicker showTime />
@@ -26,7 +26,6 @@ ReactDOM.render(
     <RangePicker picker="month" />
     <RangePicker picker="quarter" />
     <RangePicker picker="year" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/select-in-range.md b/components/date-picker/demo/select-in-range.md
index 22cb8244e6..d7c369138f 100644
--- a/components/date-picker/demo/select-in-range.md
+++ b/components/date-picker/demo/select-in-range.md
@@ -52,5 +52,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md
index cb7b9f5c1c..88a4ccaa82 100644
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -45,5 +45,5 @@ class PickerSizesDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<PickerSizesDemo />, mountNode);
+export default () => <PickerSizesDemo />;
 ```
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index 0aa07ac95f..d6a1266f9f 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -98,5 +98,5 @@ class DateRange extends React.Component {
   }
 }
 
-ReactDOM.render(<DateRange />, mountNode);
+export default () => <DateRange />;
 ```
diff --git a/components/date-picker/demo/status.md b/components/date-picker/demo/status.md
index 2723908adb..454c0b3801 100644
--- a/components/date-picker/demo/status.md
+++ b/components/date-picker/demo/status.md
@@ -26,5 +26,5 @@ const Status: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<Status />, mountNode);
+export default () => <Status />;
 ```
diff --git a/components/date-picker/demo/suffix.md b/components/date-picker/demo/suffix.md
index a6bd218ec2..1cdeeb59e8 100644
--- a/components/date-picker/demo/suffix.md
+++ b/components/date-picker/demo/suffix.md
@@ -25,7 +25,7 @@ function onChange(date, dateString) {
   console.log(date, dateString);
 }
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker suffixIcon={smileIcon} onChange={onChange} />
     <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />
@@ -35,7 +35,6 @@ ReactDOM.render(
     <DatePicker suffixIcon="ab" onChange={onChange} picker="month" />
     <RangePicker suffixIcon="ab" onChange={onChange} />
     <DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/date-picker/demo/switchable.md b/components/date-picker/demo/switchable.md
index 6a2131d786..66b3331ca7 100644
--- a/components/date-picker/demo/switchable.md
+++ b/components/date-picker/demo/switchable.md
@@ -42,5 +42,5 @@ function SwitchablePicker() {
   );
 }
 
-ReactDOM.render(<SwitchablePicker />, mountNode);
+export default () => <SwitchablePicker />;
 ```
diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md
index adb9c00094..af777cf1ef 100644
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -27,7 +27,7 @@ function onOk(value) {
   console.log('onOk: ', value);
 }
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" size={12}>
     <DatePicker showTime onChange={onChange} onOk={onOk} />
     <RangePicker
@@ -36,7 +36,6 @@ ReactDOM.render(
       onChange={onChange}
       onOk={onOk}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/descriptions/demo/basic.md b/components/descriptions/demo/basic.md
index f4d2232c3d..e84f31a541 100644
--- a/components/descriptions/demo/basic.md
+++ b/components/descriptions/demo/basic.md
@@ -16,7 +16,7 @@ Simplest Usage.
 ```jsx
 import { Descriptions } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Descriptions title="User Info">
     <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
     <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Descriptions.Item label="Address">
       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
     </Descriptions.Item>
-  </Descriptions>,
-  mountNode,
+  </Descriptions>
 );
 ```
diff --git a/components/descriptions/demo/border.md b/components/descriptions/demo/border.md
index 64d063c81a..2abf6717a4 100644
--- a/components/descriptions/demo/border.md
+++ b/components/descriptions/demo/border.md
@@ -16,7 +16,7 @@ Descriptions with border and background color.
 ```jsx
 import { Descriptions, Badge } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Descriptions title="User Info" bordered>
     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
@@ -44,7 +44,6 @@ ReactDOM.render(
       <br />
       Region: East China 1<br />
     </Descriptions.Item>
-  </Descriptions>,
-  mountNode,
+  </Descriptions>
 );
 ```
diff --git a/components/descriptions/demo/responsive.md b/components/descriptions/demo/responsive.md
index 24448bc918..8178e15059 100644
--- a/components/descriptions/demo/responsive.md
+++ b/components/descriptions/demo/responsive.md
@@ -46,5 +46,5 @@ const Demo = () => (
   </div>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/descriptions/demo/size.md b/components/descriptions/demo/size.md
index 75c624e017..3976c9f3ea 100644
--- a/components/descriptions/demo/size.md
+++ b/components/descriptions/demo/size.md
@@ -83,5 +83,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/descriptions/demo/style.md b/components/descriptions/demo/style.md
index 9824758288..723040a27e 100644
--- a/components/descriptions/demo/style.md
+++ b/components/descriptions/demo/style.md
@@ -69,5 +69,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/descriptions/demo/text.md b/components/descriptions/demo/text.md
index ac6df08b1f..93c3060ae1 100644
--- a/components/descriptions/demo/text.md
+++ b/components/descriptions/demo/text.md
@@ -49,7 +49,7 @@ const columns = [
     key: 'address',
   },
 ];
-ReactDOM.render(
+export default () => (
   <Descriptions title="User Info" column={2}>
     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
     <Descriptions.Item label={<div style={{ display: 'flex' }}>Billing Mode</div>}>
@@ -83,7 +83,6 @@ ReactDOM.render(
     <Descriptions.Item label="Config Info">
       <Table size="small" pagination={false} dataSource={dataSource} columns={columns} />
     </Descriptions.Item>
-  </Descriptions>,
-  mountNode,
+  </Descriptions>
 );
 ```
diff --git a/components/descriptions/demo/vertical-border.md b/components/descriptions/demo/vertical-border.md
index 46f6e87be7..a90a67c9c1 100644
--- a/components/descriptions/demo/vertical-border.md
+++ b/components/descriptions/demo/vertical-border.md
@@ -16,7 +16,7 @@ Descriptions with border and background color.
 ```jsx
 import { Descriptions, Badge } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Descriptions title="User Info" layout="vertical" bordered>
     <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
     <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
@@ -44,7 +44,6 @@ ReactDOM.render(
       <br />
       Region: East China 1<br />
     </Descriptions.Item>
-  </Descriptions>,
-  mountNode,
+  </Descriptions>
 );
 ```
diff --git a/components/descriptions/demo/vertical.md b/components/descriptions/demo/vertical.md
index b5e3f0ea07..a2713726e8 100644
--- a/components/descriptions/demo/vertical.md
+++ b/components/descriptions/demo/vertical.md
@@ -16,7 +16,7 @@ Simplest Usage.
 ```jsx
 import { Descriptions } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Descriptions title="User Info" layout="vertical">
     <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
     <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
@@ -25,7 +25,6 @@ ReactDOM.render(
       No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
     </Descriptions.Item>
     <Descriptions.Item label="Remark">empty</Descriptions.Item>
-  </Descriptions>,
-  mountNode,
+  </Descriptions>
 );
 ```
diff --git a/components/divider/demo/customize-style.md b/components/divider/demo/customize-style.md
index 79822c392e..14b8597453 100644
--- a/components/divider/demo/customize-style.md
+++ b/components/divider/demo/customize-style.md
@@ -17,7 +17,7 @@ Use `style` to change default style.
 ```jsx
 import { Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
     <Divider style={{ borderColor: '#7cb305' }} dashed />
@@ -26,7 +26,6 @@ ReactDOM.render(
     </Divider>
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
index bf35392e86..33e9d02b4a 100644
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@@ -16,7 +16,7 @@ Divider is `horizontal` by default. You can add text within Divider.
 ```jsx
 import { Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
@@ -32,7 +32,6 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/divider/demo/plain.md b/components/divider/demo/plain.md
index 7f2e0f79f0..b4bf5438e7 100644
--- a/components/divider/demo/plain.md
+++ b/components/divider/demo/plain.md
@@ -16,7 +16,7 @@ You can use non-heading style of divider text by setting `plain`.
 ```jsx
 import { Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
@@ -41,7 +41,6 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md
index 4f440d2b89..554b8c470b 100644
--- a/components/divider/demo/vertical.md
+++ b/components/divider/demo/vertical.md
@@ -16,14 +16,13 @@ Use `type="vertical"` make it vertical.
 ```jsx
 import { Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     Text
     <Divider type="vertical" />
     <a href="#">Link</a>
     <Divider type="vertical" />
     <a href="#">Link</a>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/divider/demo/with-text.md b/components/divider/demo/with-text.md
index 21c63d786c..d27d1830d0 100644
--- a/components/divider/demo/with-text.md
+++ b/components/divider/demo/with-text.md
@@ -16,7 +16,7 @@ Divider with inner title, set `orientation="left/right"` to align it.
 ```jsx
 import { Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
@@ -51,7 +51,6 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js
index 8e56024bb8..f17a8fe42d 100644
--- a/components/drawer/__tests__/Drawer.test.js
+++ b/components/drawer/__tests__/Drawer.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Drawer from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
@@ -18,12 +20,12 @@ describe('Drawer', () => {
   rtlTest(Drawer);
 
   it('render correctly', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer visible width={400} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('getContainer return undefined', () => {
@@ -34,55 +36,55 @@ describe('Drawer', () => {
   });
 
   it('render top drawer', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer visible height={400} placement="top" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('have a title', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer visible title="Test Title" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('closable is false', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer visible closable={false} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('destroyOnClose is true', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer destroyOnClose visible={false} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('className is test_drawer', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer destroyOnClose visible={false} className="test_drawer" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('style/drawerStyle/headerStyle/bodyStyle should work', () => {
     const style = {
       backgroundColor: '#08c',
     };
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer
         visible
         style={style}
@@ -94,16 +96,16 @@ describe('Drawer', () => {
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('have a footer', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer visible footer="Test Footer" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('forceRender works', () => {
@@ -126,18 +128,18 @@ describe('Drawer', () => {
   });
 
   it('support closeIcon', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Drawer visible closable closeIcon={<span>close</span>} width={400} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('ConfigProvider should not warning', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    mount(
+    render(
       <ConfigProvider virtual>
         <Drawer visible>Bamboo is Light</Drawer>
       </ConfigProvider>,
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index d8d415af68..70de5f365c 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -13,14 +13,14 @@ exports[`Drawer className is test_drawer 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
+      style="transform: translateX(100%); width: 378px;"
     >
       <div
         class="ant-drawer-content"
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="opacity:0;transition:opacity .3s"
+          style="opacity: 0; transition: opacity .3s;"
         >
           <div
             class="ant-drawer-header ant-drawer-header-close-only"
@@ -72,7 +72,7 @@ exports[`Drawer closable is false 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
+    class="ant-drawer ant-drawer-right ant-drawer-open"
     tabindex="-1"
   >
     <div
@@ -80,7 +80,7 @@ exports[`Drawer closable is false 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
+      style="width: 378px;"
     >
       <div
         class="ant-drawer-content"
@@ -113,14 +113,14 @@ exports[`Drawer destroyOnClose is true 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
+      style="transform: translateX(100%); width: 378px;"
     >
       <div
         class="ant-drawer-content"
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="opacity:0;transition:opacity .3s"
+          style="opacity: 0; transition: opacity .3s;"
         >
           <div
             class="ant-drawer-header ant-drawer-header-close-only"
@@ -242,7 +242,7 @@ exports[`Drawer have a footer 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
+    class="ant-drawer ant-drawer-right ant-drawer-open"
     tabindex="-1"
   >
     <div
@@ -250,7 +250,7 @@ exports[`Drawer have a footer 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
+      style="width: 378px;"
     >
       <div
         class="ant-drawer-content"
@@ -313,7 +313,7 @@ exports[`Drawer have a title 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
+    class="ant-drawer ant-drawer-right ant-drawer-open"
     tabindex="-1"
   >
     <div
@@ -321,7 +321,7 @@ exports[`Drawer have a title 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
+      style="width: 378px;"
     >
       <div
         class="ant-drawer-content"
@@ -384,7 +384,7 @@ exports[`Drawer render correctly 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
+    class="ant-drawer ant-drawer-right ant-drawer-open"
     tabindex="-1"
   >
     <div
@@ -392,7 +392,7 @@ exports[`Drawer render correctly 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:400px"
+      style="width: 400px;"
     >
       <div
         class="ant-drawer-content"
@@ -450,7 +450,7 @@ exports[`Drawer render top drawer 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-top"
+    class="ant-drawer ant-drawer-top ant-drawer-open"
     tabindex="-1"
   >
     <div
@@ -458,7 +458,7 @@ exports[`Drawer render top drawer 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateY(-100%);-ms-transform:translateY(-100%);height:400px"
+      style="height: 400px;"
     >
       <div
         class="ant-drawer-content"
@@ -518,8 +518,8 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
-    style="background-color:#08c"
+    class="ant-drawer ant-drawer-right ant-drawer-open"
+    style="background-color: rgb(0, 136, 204);"
     tabindex="-1"
   >
     <div
@@ -527,18 +527,18 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:378px"
+      style="width: 378px;"
     >
       <div
         class="ant-drawer-content"
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="background-color:#08c"
+          style="background-color: rgb(0, 136, 204);"
         >
           <div
             class="ant-drawer-header ant-drawer-header-close-only"
-            style="background-color:#08c"
+            style="background-color: rgb(0, 136, 204);"
           >
             <div
               class="ant-drawer-header-title"
@@ -572,7 +572,7 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
           </div>
           <div
             class="ant-drawer-body"
-            style="background-color:#08c"
+            style="background-color: rgb(0, 136, 204);"
           >
             Here is content of Drawer
           </div>
@@ -588,7 +588,7 @@ exports[`Drawer support closeIcon 1`] = `
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
+    class="ant-drawer ant-drawer-right ant-drawer-open"
     tabindex="-1"
   >
     <div
@@ -596,7 +596,7 @@ exports[`Drawer support closeIcon 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);-ms-transform:translateX(100%);width:400px"
+      style="width: 400px;"
     >
       <div
         class="ant-drawer-content"
diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
index 33b1931dcd..55f91ca212 100644
--- a/components/drawer/demo/basic-right.md
+++ b/components/drawer/demo/basic-right.md
@@ -39,7 +39,7 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 <style>
diff --git a/components/drawer/demo/config-provider.md b/components/drawer/demo/config-provider.md
index 8a913ae707..c48f6e2500 100644
--- a/components/drawer/demo/config-provider.md
+++ b/components/drawer/demo/config-provider.md
@@ -49,5 +49,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/drawer/demo/extra.md b/components/drawer/demo/extra.md
index d346bd0628..f0034c695a 100644
--- a/components/drawer/demo/extra.md
+++ b/components/drawer/demo/extra.md
@@ -67,5 +67,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index 262575becf..821842a87c 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -156,7 +156,7 @@ class DrawerForm extends React.Component {
   }
 }
 
-ReactDOM.render(<DrawerForm />, mountNode);
+export default () => <DrawerForm />;
 ```
 
 ```css
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index cbbc8fc38b..3410bd3691 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -74,7 +74,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 <style>
diff --git a/components/drawer/demo/no-mask.md b/components/drawer/demo/no-mask.md
index f46a531136..1281febf95 100644
--- a/components/drawer/demo/no-mask.md
+++ b/components/drawer/demo/no-mask.md
@@ -46,5 +46,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index 65d0821aa8..3b97aa125e 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -69,5 +69,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index f454857ff3..e24c251a83 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -56,7 +56,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/drawer/demo/size.md b/components/drawer/demo/size.md
index 5be09bb39f..3928d468d6 100644
--- a/components/drawer/demo/size.md
+++ b/components/drawer/demo/size.md
@@ -65,5 +65,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index 489fd5c90e..dce07c178b 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -167,7 +167,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/dropdown/demo/arrow-center.md b/components/dropdown/demo/arrow-center.md
index d792042891..6098882cbf 100644
--- a/components/dropdown/demo/arrow-center.md
+++ b/components/dropdown/demo/arrow-center.md
@@ -44,7 +44,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
       <Button>bottomLeft</Button>
@@ -65,8 +65,7 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topRight" arrow={{ pointAtCenter: true }}>
       <Button>topRight</Button>
     </Dropdown>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
index 9d17b3dbbb..c95ec279b4 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -44,7 +44,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <Dropdown overlay={menu} placement="bottomLeft" arrow>
       <Button>bottomLeft</Button>
@@ -65,8 +65,7 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topRight" arrow>
       <Button>topRight</Button>
     </Dropdown>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
index 21666afaab..22ed16e776 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -52,12 +52,11 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
       Hover me <DownOutlined />
     </a>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
diff --git a/components/dropdown/demo/context-menu.md b/components/dropdown/demo/context-menu.md
index 0c543cdb0c..c1db8f4336 100644
--- a/components/dropdown/demo/context-menu.md
+++ b/components/dropdown/demo/context-menu.md
@@ -35,7 +35,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu} trigger={['contextMenu']}>
     <div
       className="site-dropdown-context-menu"
@@ -47,8 +47,7 @@ ReactDOM.render(
     >
       Right Click on here
     </div>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
 
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 0412978a34..ddc6f8c830 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -50,7 +50,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Space wrap>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
@@ -77,7 +77,6 @@ ReactDOM.render(
         Button <DownOutlined />
       </Button>
     </Dropdown>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
index 8f49f72a9d..a7a36960c4 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -41,12 +41,11 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
       Hover me, Click menu item <DownOutlined />
     </a>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
index 6b60b72a53..dc8eb3336e 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -48,12 +48,11 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
       Hover me <DownOutlined />
     </a>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
diff --git a/components/dropdown/demo/loading.md b/components/dropdown/demo/loading.md
index 3629c757df..84f914564c 100644
--- a/components/dropdown/demo/loading.md
+++ b/components/dropdown/demo/loading.md
@@ -74,5 +74,5 @@ class App extends React.Component {
     );
   }
 }
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/dropdown/demo/menu-full.md b/components/dropdown/demo/menu-full.md
index 3d78f7fab6..f89f57db5f 100644
--- a/components/dropdown/demo/menu-full.md
+++ b/components/dropdown/demo/menu-full.md
@@ -69,12 +69,11 @@ const items: MenuItem[] = [
 
 const menu = <Menu selectedKeys={['1']} openKeys={['sub1']} items={items} />;
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
       Hover to check menu style <DownOutlined />
     </a>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md
index 37826c2ac6..6cf7104bac 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -66,5 +66,5 @@ class OverlayVisible extends React.Component {
   }
 }
 
-ReactDOM.render(<OverlayVisible />, mountNode);
+export default () => <OverlayVisible />;
 ```
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index 8aba3235f8..4dc1f707cc 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -44,7 +44,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Space wrap>
       <Dropdown overlay={menu} placement="bottomLeft">
@@ -68,7 +68,6 @@ ReactDOM.render(
         <Button>topRight</Button>
       </Dropdown>
     </Space>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index 75e1e3b6a9..622f4f9866 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -61,12 +61,11 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
       Cascading menu <DownOutlined />
     </a>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
index b727e6af64..5c86a3d5dd 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -39,12 +39,11 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu} trigger={['click']}>
     <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
       Click me <DownOutlined />
     </a>
-  </Dropdown>,
-  mountNode,
+  </Dropdown>
 );
 ```
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 20cf3a9356..15b555b84e 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -61,6 +61,7 @@ export interface DropDownProps {
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   openClassName?: string;
+  children?: React.ReactNode;
 }
 
 interface DropdownInterface extends React.FC<DropDownProps> {
diff --git a/components/empty/demo/basic.md b/components/empty/demo/basic.md
index f8679f2857..37e68151e6 100644
--- a/components/empty/demo/basic.md
+++ b/components/empty/demo/basic.md
@@ -16,5 +16,5 @@ Simplest Usage.
 ```jsx
 import { Empty } from 'antd';
 
-ReactDOM.render(<Empty />, mountNode);
+export default () => <Empty />;
 ```
diff --git a/components/empty/demo/config-provider.md b/components/empty/demo/config-provider.md
index 550dc06ca7..0cd1520a30 100644
--- a/components/empty/demo/config-provider.md
+++ b/components/empty/demo/config-provider.md
@@ -96,7 +96,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>
diff --git a/components/empty/demo/customize.md b/components/empty/demo/customize.md
index f53ca7c021..3ebb99fc74 100644
--- a/components/empty/demo/customize.md
+++ b/components/empty/demo/customize.md
@@ -16,7 +16,7 @@ Customize image source, image size, description and extra content.
 ```jsx
 import { Empty, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Empty
     image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
     imageStyle={{
@@ -29,7 +29,6 @@ ReactDOM.render(
     }
   >
     <Button type="primary">Create Now</Button>
-  </Empty>,
-  mountNode,
+  </Empty>
 );
 ```
diff --git a/components/empty/demo/description.md b/components/empty/demo/description.md
index 4fcac75f0a..844fb64fc2 100644
--- a/components/empty/demo/description.md
+++ b/components/empty/demo/description.md
@@ -16,5 +16,5 @@ Simplest Usage with no description.
 ```jsx
 import { Empty } from 'antd';
 
-ReactDOM.render(<Empty description={false} />, mountNode);
+export default () => <Empty description={false} />;
 ```
diff --git a/components/empty/demo/simple.md b/components/empty/demo/simple.md
index 877c17ae4f..f2a87fdf57 100644
--- a/components/empty/demo/simple.md
+++ b/components/empty/demo/simple.md
@@ -16,5 +16,5 @@ You can choose another style of `image` by setting image to `Empty.PRESENTED_IMA
 ```jsx
 import { Empty } from 'antd';
 
-ReactDOM.render(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />, mountNode);
+export default () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
 ```
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 654c3af108..dceaf86b00 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -454,7 +454,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
             'Form.Item',
             '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.',
           );
-          childNode = children;
+          childNode = children as React.ReactNode;
         }
 
         return renderLayout(childNode, fieldId, isRequired);
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 79f3367bef..67b2aba5f7 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -742,134 +742,264 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
 `;
 
 exports[`renders ./components/form/demo/col-24-debug.md extend context correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="basic"
->
-  <div
-    class="ant-row ant-form-item"
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-horizontal"
+    id="basic"
   >
     <div
-      class="ant-col ant-col-24 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_username"
-        title="Username"
-      >
-        Username
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-24 ant-form-item-control"
+      class="ant-row ant-form-item"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-24 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class="ant-form-item-required"
+          for="basic_username"
+          title="Username"
         >
-          <input
-            class="ant-input"
-            id="basic_username"
-            type="text"
-            value=""
-          />
-        </div>
+          Username
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-24 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_password"
-        title="Password"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-24 ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-24 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-input-affix-wrapper ant-input-password"
+          <div
+            class="ant-form-item-control-input-content"
           >
             <input
-              action="click"
               class="ant-input"
-              id="basic_password"
-              type="password"
+              id="basic_username"
+              type="text"
               value=""
             />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
     <div
-      class="ant-col ant-col-24 ant-form-item-control"
+      class="ant-row ant-form-item"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-24 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="basic_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-24 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
+            <span
+              class="ant-input-affix-wrapper ant-input-password"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="basic_password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
-          </button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</form>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-col-24 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-horizontal"
+    id="responsive"
+  >
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+      >
+        <label
+          class="ant-form-item-required"
+          for="responsive_username"
+          title="Username"
+        >
+          Username
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="responsive_username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+      >
+        <label
+          class="ant-form-item-required"
+          for="responsive_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="responsive_password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+]
 `;
 
 exports[`renders ./components/form/demo/control-hooks.md extend context correctly 1`] = `
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 790218f1a6..5a10e16ee3 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -578,134 +578,264 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/form/demo/col-24-debug.md correctly 1`] = `
-<form
-  autocomplete="off"
-  class="ant-form ant-form-horizontal"
-  id="basic"
->
-  <div
-    class="ant-row ant-form-item"
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-horizontal"
+    id="basic"
   >
     <div
-      class="ant-col ant-col-24 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_username"
-        title="Username"
-      >
-        Username
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-24 ant-form-item-control"
+      class="ant-row ant-form-item"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-24 ant-form-item-label"
       >
-        <div
-          class="ant-form-item-control-input-content"
+        <label
+          class="ant-form-item-required"
+          for="basic_username"
+          title="Username"
         >
-          <input
-            class="ant-input"
-            id="basic_username"
-            type="text"
-            value=""
-          />
-        </div>
+          Username
+        </label>
       </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-24 ant-form-item-label"
-    >
-      <label
-        class="ant-form-item-required"
-        for="basic_password"
-        title="Password"
-      >
-        Password
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-24 ant-form-item-control"
-    >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-24 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <span
-            class="ant-input-affix-wrapper ant-input-password"
+          <div
+            class="ant-form-item-control-input-content"
           >
             <input
-              action="click"
               class="ant-input"
-              id="basic_password"
-              type="password"
+              id="basic_username"
+              type="text"
               value=""
             />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                aria-label="eye-invisible"
-                class="anticon anticon-eye-invisible ant-input-password-icon"
-                role="img"
-                tabindex="-1"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="eye-invisible"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-                  />
-                  <path
-                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
     <div
-      class="ant-col ant-col-24 ant-form-item-control"
+      class="ant-row ant-form-item"
     >
       <div
-        class="ant-form-item-control-input"
+        class="ant-col ant-col-24 ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="basic_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-24 ant-form-item-control"
       >
         <div
-          class="ant-form-item-control-input-content"
+          class="ant-form-item-control-input"
         >
-          <button
-            class="ant-btn ant-btn-primary"
-            type="submit"
+          <div
+            class="ant-form-item-control-input-content"
           >
-            <span>
-              Submit
+            <span
+              class="ant-input-affix-wrapper ant-input-password"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="basic_password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
-          </button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</form>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-col-24 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-horizontal"
+    id="responsive"
+  >
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+      >
+        <label
+          class="ant-form-item-required"
+          for="responsive_username"
+          title="Username"
+        >
+          Username
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="responsive_username"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label ant-col-sm-24 ant-col-xl-24"
+      >
+        <label
+          class="ant-form-item-required"
+          for="responsive_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-password"
+            >
+              <input
+                action="click"
+                class="ant-input"
+                id="responsive_password"
+                type="password"
+                value=""
+              />
+              <span
+                class="ant-input-suffix"
+              >
+                <span
+                  aria-label="eye-invisible"
+                  class="anticon anticon-eye-invisible ant-input-password-icon"
+                  role="img"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye-invisible"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+                    />
+                    <path
+                      d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-control ant-col-sm-24 ant-col-xl-24"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+]
 `;
 
 exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index f847fd2b9e..1aaa52097e 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -1,5 +1,7 @@
 import React, { Component, useState } from 'react';
 import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import Form from '..';
@@ -27,15 +29,18 @@ describe('Form', () => {
   scrollIntoView.mockImplementation(() => {});
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-  async function change(wrapper, index, value, executeMockTimer) {
-    wrapper.find(Input).at(index).simulate('change', { target: { value } });
+  async function change(container, index, value, executeMockTimer) {
+    fireEvent.change(container.querySelectorAll('input')[index], {
+      target: { value },
+    });
     await sleep(200);
 
     if (executeMockTimer) {
-      act(() => {
-        jest.runAllTimers();
-        wrapper.update();
-      });
+      for (let i = 0; i < 10; i += 1) {
+        act(() => {
+          jest.runAllTimers();
+        });
+      }
       await sleep(1);
     }
   }
@@ -60,19 +65,19 @@ describe('Form', () => {
 
       const onChange = jest.fn();
 
-      const wrapper = mount(
+      const { container } = render(
         <Form>
           <Form.Item>
-            <Form.Item name="test" rules={[{ required: true }]}>
+            <Form.Item name="test" initialValue="bamboo" rules={[{ required: true }]}>
               <Input onChange={onChange} />
             </Form.Item>
           </Form.Item>
         </Form>,
       );
 
-      await change(wrapper, 0, '', true);
-      expect(wrapper.find('.ant-form-item-with-help').length).toBeTruthy();
-      expect(wrapper.find('.ant-form-item-has-error').length).toBeTruthy();
+      await change(container, 0, '', true);
+      expect(container.querySelectorAll('.ant-form-item-with-help').length).toBeTruthy();
+      expect(container.querySelectorAll('.ant-form-item-has-error').length).toBeTruthy();
 
       expect(onChange).toHaveBeenCalled();
 
@@ -124,13 +129,13 @@ describe('Form', () => {
         );
       };
 
-      const wrapper = mount(<Demo />);
-      await change(wrapper, 0, '1', true);
-      expect(wrapper.find('.ant-form-item-explain').text()).toEqual('aaa');
-      await change(wrapper, 0, '2', true);
-      expect(wrapper.find('.ant-form-item-explain').text()).toEqual('ccc');
-      await change(wrapper, 0, '1', true);
-      expect(wrapper.find('.ant-form-item-explain').text()).toEqual('aaa');
+      const { container } = render(<Demo />);
+      await change(container, 0, '1', true);
+      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('aaa');
+      await change(container, 0, '2', true);
+      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('ccc');
+      await change(container, 0, '1', true);
+      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('aaa');
 
       jest.useRealTimers();
     });
@@ -353,7 +358,7 @@ describe('Form', () => {
   it('Error change should work', async () => {
     jest.useFakeTimers();
 
-    const wrapper = mount(
+    const { container } = render(
       <Form>
         <Form.Item
           name="name"
@@ -376,13 +381,15 @@ describe('Form', () => {
 
     /* eslint-disable no-await-in-loop */
     for (let i = 0; i < 3; i += 1) {
-      await change(wrapper, 0, '', true);
-      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual("'name' is required");
+      await change(container, 0, 'bamboo', true);
+      await change(container, 0, '', true);
+      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual(
+        "'name' is required",
+      );
 
-      await change(wrapper, 0, 'p', true);
+      await change(container, 0, 'p', true);
       await sleep(100);
-      wrapper.update();
-      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('not a p');
+      expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('not a p');
     }
     /* eslint-enable */
 
@@ -470,17 +477,22 @@ describe('Form', () => {
   it('Form.Item with `help` should display error style when validate failed', async () => {
     jest.useFakeTimers();
 
-    const wrapper = mount(
+    const { container } = render(
       <Form>
-        <Form.Item name="test" help="help" rules={[{ required: true, message: 'message' }]}>
+        <Form.Item
+          name="test"
+          help="help"
+          initialValue="bamboo"
+          rules={[{ required: true, message: 'message' }]}
+        >
           <Input />
         </Form.Item>
       </Form>,
     );
 
-    await change(wrapper, 0, '', true);
-    expect(wrapper.find('.ant-form-item').first().hasClass('ant-form-item-has-error')).toBeTruthy();
-    expect(wrapper.find('.ant-form-item-explain').text()).toEqual('help');
+    await change(container, 0, '', true);
+    expect(container.querySelector('.ant-form-item')).toHaveClass('ant-form-item-has-error');
+    expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('help');
 
     jest.useRealTimers();
   });
@@ -488,23 +500,22 @@ describe('Form', () => {
   it('clear validation message when ', async () => {
     jest.useFakeTimers();
 
-    const wrapper = mount(
+    const { container } = render(
       <Form>
         <Form.Item name="username" rules={[{ required: true, message: 'message' }]}>
           <Input />
         </Form.Item>
       </Form>,
     );
-    await change(wrapper, 0, '1', true);
-    expect(wrapper.find('.ant-form-item-explain').length).toBeFalsy();
+    await change(container, 0, '1', true);
+    expect(container.querySelectorAll('.ant-form-item-explain').length).toBeFalsy();
 
-    await change(wrapper, 0, '', true);
-    expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
+    await change(container, 0, '', true);
+    expect(container.querySelectorAll('.ant-form-item-explain').length).toBeTruthy();
 
-    await change(wrapper, 0, '123', true);
+    await change(container, 0, '123', true);
     await sleep(800);
-    wrapper.update();
-    expect(wrapper.find('.ant-form-item-explain').length).toBeFalsy();
+    expect(container.querySelectorAll('.ant-form-item-explain').length).toBeFalsy();
 
     jest.useRealTimers();
   });
@@ -591,8 +602,8 @@ describe('Form', () => {
       );
     };
 
-    const wrapper = mount(<Demo />);
-    wrapper.find('button').simulate('click');
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('button'));
 
     expect(errorSpy).not.toHaveBeenCalled();
   });
@@ -794,7 +805,7 @@ describe('Form', () => {
   });
 
   it('no warning of initialValue & getValueProps & preserve', () => {
-    mount(
+    render(
       <Form>
         <Form.Item initialValue="bamboo" getValueProps={() => null} preserve={false}>
           <Input />
@@ -973,19 +984,23 @@ describe('Form', () => {
   it('warningOnly validate', async () => {
     jest.useFakeTimers();
 
-    const wrapper = mount(
+    const { container } = render(
       <Form>
         <Form.Item>
-          <Form.Item name="test" rules={[{ required: true, warningOnly: true }]}>
+          <Form.Item
+            name="test"
+            initialValue="bamboo"
+            rules={[{ required: true, warningOnly: true }]}
+          >
             <Input />
           </Form.Item>
         </Form.Item>
       </Form>,
     );
 
-    await change(wrapper, 0, '', true);
-    expect(wrapper.find('.ant-form-item-with-help').length).toBeTruthy();
-    expect(wrapper.find('.ant-form-item-has-warning').length).toBeTruthy();
+    await change(container, 0, '', true);
+    expect(container.querySelectorAll('.ant-form-item-with-help').length).toBeTruthy();
+    expect(container.querySelectorAll('.ant-form-item-has-warning').length).toBeTruthy();
 
     jest.useRealTimers();
   });
@@ -994,12 +1009,13 @@ describe('Form', () => {
     jest.useFakeTimers();
     let rejectFn = null;
 
-    const wrapper = mount(
+    const { container, unmount } = render(
       <Form>
         <Form.Item>
           <Form.Item
             noStyle
             name="test"
+            initialValue="bamboo"
             rules={[
               {
                 validator: () =>
@@ -1015,9 +1031,9 @@ describe('Form', () => {
       </Form>,
     );
 
-    await change(wrapper, 0, '', true);
+    await change(container, 0, '', true);
 
-    wrapper.unmount();
+    unmount();
 
     // Delay validate failed
     rejectFn(new Error('delay failed'));
diff --git a/components/form/__tests__/list.test.js b/components/form/__tests__/list.test.js
index 8f7778b0c6..b7b1881c86 100644
--- a/components/form/__tests__/list.test.js
+++ b/components/form/__tests__/list.test.js
@@ -64,9 +64,11 @@ describe('Form.List', () => {
       expect(wrapper.find(Input).length).toBe(3);
 
       await change(wrapper, 2, '');
-      act(() => {
-        jest.runAllTimers();
-      });
+      for (let i = 0; i < 10; i += 1) {
+        act(() => {
+          jest.runAllTimers();
+        });
+      }
       wrapper.update();
       expect(wrapper.find('.ant-form-item-explain div').length).toBe(1);
 
diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
index 1792c61fd3..8bbd9d424c 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.md
@@ -102,12 +102,11 @@ const AdvancedSearchForm = () => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <div>
     <AdvancedSearchForm />
     <div className="search-result-list">Search Result List</div>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md
index c0d482ca92..4b87c65870 100644
--- a/components/form/demo/basic.md
+++ b/components/form/demo/basic.md
@@ -64,5 +64,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/col-24-debug.md b/components/form/demo/col-24-debug.md
index 5524eb3092..91db0dd8d1 100644
--- a/components/form/demo/col-24-debug.md
+++ b/components/form/demo/col-24-debug.md
@@ -27,39 +27,72 @@ const Demo = () => {
   };
 
   return (
-    <Form
-      name="basic"
-      labelCol={{ span: 24 }}
-      wrapperCol={{ span: 24 }}
-      initialValues={{ remember: true }}
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
-      autoComplete="off"
-    >
-      <Form.Item
-        label="Username"
-        name="username"
-        rules={[{ required: true, message: 'Please input your username!' }]}
+    <>
+      <Form
+        name="basic"
+        labelCol={{ span: 24 }}
+        wrapperCol={{ span: 24 }}
+        initialValues={{ remember: true }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
       >
-        <Input />
-      </Form.Item>
+        <Form.Item
+          label="Username"
+          name="username"
+          rules={[{ required: true, message: 'Please input your username!' }]}
+        >
+          <Input />
+        </Form.Item>
 
-      <Form.Item
-        label="Password"
-        name="password"
-        rules={[{ required: true, message: 'Please input your password!' }]}
+        <Form.Item
+          label="Password"
+          name="password"
+          rules={[{ required: true, message: 'Please input your password!' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+      <Form
+        name="responsive"
+        labelCol={{ sm: 24, xl: 24 }}
+        wrapperCol={{ sm: 24, xl: 24 }}
+        initialValues={{ remember: true }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
       >
-        <Input.Password />
-      </Form.Item>
+        <Form.Item
+          label="Username"
+          name="username"
+          rules={[{ required: true, message: 'Please input your username!' }]}
+        >
+          <Input />
+        </Form.Item>
 
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
+        <Form.Item
+          label="Password"
+          name="password"
+          rules={[{ required: true, message: 'Please input your password!' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
+    </>
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/complex-form-control.md b/components/form/demo/complex-form-control.md
index 2396922377..0bb68b3e2f 100644
--- a/components/form/demo/complex-form-control.md
+++ b/components/form/demo/complex-form-control.md
@@ -125,5 +125,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md
index a916b5fe34..1de8a14c06 100644
--- a/components/form/demo/control-hooks.md
+++ b/components/form/demo/control-hooks.md
@@ -104,7 +104,7 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/form/demo/control-ref.md b/components/form/demo/control-ref.md
index 1702f21e70..19f7a5b3a7 100644
--- a/components/form/demo/control-ref.md
+++ b/components/form/demo/control-ref.md
@@ -107,7 +107,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md
index c6aab5cd33..b0121577bc 100644
--- a/components/form/demo/customized-form-controls.md
+++ b/components/form/demo/customized-form-controls.md
@@ -119,5 +119,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/dep-debug.md b/components/form/demo/dep-debug.md
index 51a277e676..4ab51673f8 100644
--- a/components/form/demo/dep-debug.md
+++ b/components/form/demo/dep-debug.md
@@ -46,5 +46,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/disabled-input-debug.md b/components/form/demo/disabled-input-debug.md
index 7ca4314297..4c0f5fbc35 100644
--- a/components/form/demo/disabled-input-debug.md
+++ b/components/form/demo/disabled-input-debug.md
@@ -17,7 +17,7 @@ Test disabled Input with validate state
 ```tsx
 import { Form, Input } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Form>
     <Form.Item label="Normal0">
       <Input placeholder="unavailable choice" value="Buggy!" />
@@ -55,7 +55,6 @@ ReactDOM.render(
     <Form.Item label="FailDisabled3" validateStatus="error" help="Buggy!">
       <Input placeholder="unavailable choice" disabled prefix="人民币" value="50" />
     </Form.Item>
-  </Form>,
-  mountNode,
+  </Form>
 );
 ```
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index a1b17c2774..1137eb55a7 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -117,7 +117,7 @@ const DynamicFieldSet = () => {
   );
 };
 
-ReactDOM.render(<DynamicFieldSet />, mountNode);
+export default () => <DynamicFieldSet />;
 ```
 
 ```css
diff --git a/components/form/demo/dynamic-form-items-complex.md b/components/form/demo/dynamic-form-items-complex.md
index 1fccb94240..49df8b00c9 100644
--- a/components/form/demo/dynamic-form-items-complex.md
+++ b/components/form/demo/dynamic-form-items-complex.md
@@ -103,5 +103,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/dynamic-form-items-no-style.md b/components/form/demo/dynamic-form-items-no-style.md
index 2a87a0daef..59e4761d4e 100644
--- a/components/form/demo/dynamic-form-items-no-style.md
+++ b/components/form/demo/dynamic-form-items-no-style.md
@@ -62,5 +62,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/dynamic-form-items.md b/components/form/demo/dynamic-form-items.md
index 524d482c7c..76f621e529 100644
--- a/components/form/demo/dynamic-form-items.md
+++ b/components/form/demo/dynamic-form-items.md
@@ -63,5 +63,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/dynamic-rule.md b/components/form/demo/dynamic-rule.md
index 0c0efbe8ba..755e537871 100644
--- a/components/form/demo/dynamic-rule.md
+++ b/components/form/demo/dynamic-rule.md
@@ -89,5 +89,5 @@ const DynamicRule = () => {
   );
 };
 
-ReactDOM.render(<DynamicRule />, mountNode);
+export default () => <DynamicRule />;
 ```
diff --git a/components/form/demo/form-context.md b/components/form/demo/form-context.md
index 4050952d09..83dfb9e25a 100644
--- a/components/form/demo/form-context.md
+++ b/components/form/demo/form-context.md
@@ -145,7 +145,7 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
index bf63d2698c..f64914cd4e 100644
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -112,7 +112,7 @@ const CollectionsPage = () => {
   );
 };
 
-ReactDOM.render(<CollectionsPage />, mountNode);
+export default () => <CollectionsPage />;
 ```
 
 ```css
diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md
index efad85dbc3..e6cecf53e5 100644
--- a/components/form/demo/global-state.md
+++ b/components/form/demo/global-state.md
@@ -69,7 +69,7 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>
diff --git a/components/form/demo/inline-login.md b/components/form/demo/inline-login.md
index 8d2b270f65..5d9065c414 100644
--- a/components/form/demo/inline-login.md
+++ b/components/form/demo/inline-login.md
@@ -67,5 +67,5 @@ const HorizontalLoginForm = () => {
   );
 };
 
-ReactDOM.render(<HorizontalLoginForm />, mountNode);
+export default () => <HorizontalLoginForm />;
 ```
diff --git a/components/form/demo/label-debug.md b/components/form/demo/label-debug.md
index 5711c2bc08..4286a9e7da 100644
--- a/components/form/demo/label-debug.md
+++ b/components/form/demo/label-debug.md
@@ -43,5 +43,5 @@ const Demo = () => (
   </Form>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/layout-can-wrap.md b/components/form/demo/layout-can-wrap.md
index 629e45ada2..de737455f1 100644
--- a/components/form/demo/layout-can-wrap.md
+++ b/components/form/demo/layout-can-wrap.md
@@ -42,5 +42,5 @@ const Demo = () => (
   </Form>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/layout.md b/components/form/demo/layout.md
index 07a9b23c62..28d9446f27 100644
--- a/components/form/demo/layout.md
+++ b/components/form/demo/layout.md
@@ -70,5 +70,5 @@ const FormLayoutDemo = () => {
   );
 };
 
-ReactDOM.render(<FormLayoutDemo />, mountNode);
+export default () => <FormLayoutDemo />;
 ```
diff --git a/components/form/demo/nest-messages.md b/components/form/demo/nest-messages.md
index 69f72c7c4d..06853a18d7 100644
--- a/components/form/demo/nest-messages.md
+++ b/components/form/demo/nest-messages.md
@@ -65,5 +65,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md
index a8080c2936..b930e3d392 100644
--- a/components/form/demo/normal-login.md
+++ b/components/form/demo/normal-login.md
@@ -67,7 +67,7 @@ const NormalLoginForm = () => {
   );
 };
 
-ReactDOM.render(<NormalLoginForm />, mountNode);
+export default () => <NormalLoginForm />;
 ```
 
 ```css
diff --git a/components/form/demo/ref-item.md b/components/form/demo/ref-item.md
index dadd38ce13..a87a2a42d2 100644
--- a/components/form/demo/ref-item.md
+++ b/components/form/demo/ref-item.md
@@ -57,5 +57,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
index 56ee8607ea..a72564b85f 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.md
@@ -300,5 +300,5 @@ const RegistrationForm = () => {
   );
 };
 
-ReactDOM.render(<RegistrationForm />, mountNode);
+export default () => <RegistrationForm />;
 ```
diff --git a/components/form/demo/required-mark.md b/components/form/demo/required-mark.md
index f91369140d..0a45aa91d4 100644
--- a/components/form/demo/required-mark.md
+++ b/components/form/demo/required-mark.md
@@ -59,5 +59,5 @@ const FormLayoutDemo = () => {
   );
 };
 
-ReactDOM.render(<FormLayoutDemo />, mountNode);
+export default () => <FormLayoutDemo />;
 ```
diff --git a/components/form/demo/size.md b/components/form/demo/size.md
index 43290281b6..bb9d8546e9 100644
--- a/components/form/demo/size.md
+++ b/components/form/demo/size.md
@@ -98,5 +98,5 @@ const FormSizeDemo = () => {
   );
 };
 
-ReactDOM.render(<FormSizeDemo />, mountNode);
+export default () => <FormSizeDemo />;
 ```
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md
index 6929abc12f..68895f546b 100644
--- a/components/form/demo/time-related-controls.md
+++ b/components/form/demo/time-related-controls.md
@@ -89,5 +89,5 @@ const TimeRelatedForm = () => {
   );
 };
 
-ReactDOM.render(<TimeRelatedForm />, mountNode);
+export default () => <TimeRelatedForm />;
 ```
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index 4363db6c08..438ef2f3cd 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -206,5 +206,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md
index b0efda9da6..c3f41a97ef 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -48,7 +48,7 @@ const formItemLayout = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Form {...formItemLayout}>
     <Form.Item
       label="Fail"
@@ -166,7 +166,6 @@ ReactDOM.render(
     <Form.Item label="Fail" validateStatus="error" hasFeedback help="Should have something">
       <Input.TextArea allowClear showCount />
     </Form.Item>
-  </Form>,
-  mountNode,
+  </Form>
 );
 ```
diff --git a/components/form/demo/warning-only.md b/components/form/demo/warning-only.md
index 3cb8d51205..62ab8c3aeb 100644
--- a/components/form/demo/warning-only.md
+++ b/components/form/demo/warning-only.md
@@ -64,5 +64,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md
index 33efcfe52e..a4c44f06c9 100644
--- a/components/form/demo/without-form-create.md
+++ b/components/form/demo/without-form-create.md
@@ -73,5 +73,5 @@ const RawForm = () => {
   );
 };
 
-ReactDOM.render(<RawForm />, mountNode);
+export default () => <RawForm />;
 ```
diff --git a/components/form/style/horizontal.less b/components/form/style/horizontal.less
index a879c4bd71..73e6c62343 100644
--- a/components/form/style/horizontal.less
+++ b/components/form/style/horizontal.less
@@ -14,7 +14,9 @@
     min-width: 0;
   }
   // https://github.com/ant-design/ant-design/issues/32980
-  .@{form-item-prefix-cls}-label.@{ant-prefix}-col-24 + .@{form-item-prefix-cls}-control {
+  // https://github.com/ant-design/ant-design/issues/34903
+  .@{form-item-prefix-cls}-label[class$='-24'] + .@{form-item-prefix-cls}-control,
+  .@{form-item-prefix-cls}-label[class*='-24 '] + .@{form-item-prefix-cls}-control {
     min-width: unset;
   }
 }
diff --git a/components/grid/__tests__/gap.test.js b/components/grid/__tests__/gap.test.js
index 59393fd419..cb955d9b4f 100644
--- a/components/grid/__tests__/gap.test.js
+++ b/components/grid/__tests__/gap.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { mount } from 'enzyme';
 import { Col, Row } from '..';
 // eslint-disable-next-line no-unused-vars
@@ -42,12 +44,12 @@ describe('Grid.Gap', () => {
     const ssrTxt = ReactDOMServer.renderToString(<Demo />);
     div.innerHTML = ssrTxt;
 
-    const wrapper = mount(<Demo />, { hydrateIn: div });
+    const { unmount } = render(<Demo />, { container: div, hydrate: true });
 
     expect(warnSpy).not.toHaveBeenCalled();
 
     warnSpy.mockRestore();
 
-    wrapper.unmount();
+    unmount();
   });
 });
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
index 5b2c3382d4..4520fa333d 100644
--- a/components/grid/demo/basic.md
+++ b/components/grid/demo/basic.md
@@ -20,7 +20,7 @@ You can create a basic grid system by using a single set of `Row` and `Col` grid
 ```jsx
 import { Row, Col } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Row>
       <Col span={24}>col</Col>
@@ -40,7 +40,6 @@ ReactDOM.render(
       <Col span={6}>col-6</Col>
       <Col span={6}>col-6</Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index f89c551e14..df98fe43cc 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -18,7 +18,7 @@ import { Row, Col, Divider } from 'antd';
 
 const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Align Top</Divider>
     <Row justify="center" align="top">
@@ -67,8 +67,7 @@ ReactDOM.render(
         <DemoBox value={80}>col-4</DemoBox>
       </Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index bf60c7ce61..5e612b8256 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -16,7 +16,7 @@ To change the element sort by `order`.
 ```jsx
 import { Row, Col, Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Normal</Divider>
     <Row>
@@ -48,8 +48,7 @@ ReactDOM.render(
         4 col-order-responsive
       </Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/grid/demo/flex-stretch.md b/components/grid/demo/flex-stretch.md
index 4c4b286a58..642c56632e 100644
--- a/components/grid/demo/flex-stretch.md
+++ b/components/grid/demo/flex-stretch.md
@@ -16,7 +16,7 @@ Col provides `flex` prop to support fill rest.
 ```jsx
 import { Row, Col, Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Percentage columns</Divider>
     <Row>
@@ -40,7 +40,6 @@ ReactDOM.render(
       </Col>
       <Col flex="auto">auto with no-wrap</Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index 4e3f6caedb..c985a0404c 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -18,7 +18,7 @@ Child elements depending on the value of the `start`, `center`, `end`, `space-be
 ```jsx
 import { Row, Col, Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">sub-element align left</Divider>
     <Row justify="start">
@@ -67,8 +67,7 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 603d49795d..2a345225b0 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -30,7 +30,7 @@ import { Row, Col, Divider } from 'antd';
 
 const style = { background: '#0092ff', padding: '8px 0' };
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Horizontal</Divider>
     <Row gutter={16}>
@@ -89,8 +89,7 @@ ReactDOM.render(
         <div style={style}>col-6</div>
       </Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
index fbc60f162c..94b721628a 100644
--- a/components/grid/demo/offset.md
+++ b/components/grid/demo/offset.md
@@ -18,7 +18,7 @@ title:
 ```jsx
 import { Row, Col } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Row>
       <Col span={8}>col-8</Col>
@@ -39,7 +39,6 @@ ReactDOM.render(
         col-12 col-offset-6
       </Col>
     </Row>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 5bcf5aa907..99bb3fd963 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -113,7 +113,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/grid/demo/responsive-more.md b/components/grid/demo/responsive-more.md
index d154367d69..788abf1e51 100644
--- a/components/grid/demo/responsive-more.md
+++ b/components/grid/demo/responsive-more.md
@@ -18,7 +18,7 @@ title:
 ```jsx
 import { Row, Col } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Row>
     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
       Col
@@ -29,7 +29,6 @@ ReactDOM.render(
     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
       Col
     </Col>
-  </Row>,
-  mountNode,
+  </Row>
 );
 ```
diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md
index 1f4611774f..8f0f56ad0b 100644
--- a/components/grid/demo/responsive.md
+++ b/components/grid/demo/responsive.md
@@ -16,7 +16,7 @@ Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid
 ```jsx
 import { Row, Col } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Row>
     <Col xs={2} sm={4} md={6} lg={8} xl={10}>
       Col
@@ -27,7 +27,6 @@ ReactDOM.render(
     <Col xs={2} sm={4} md={6} lg={8} xl={10}>
       Col
     </Col>
-  </Row>,
-  mountNode,
+  </Row>
 );
 ```
diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md
index bde8a1ac59..a95bdd6d47 100644
--- a/components/grid/demo/sort.md
+++ b/components/grid/demo/sort.md
@@ -18,7 +18,7 @@ By using `push` and `pull` class you can easily change column order.
 ```jsx
 import { Row, Col } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Row>
     <Col span={18} push={6}>
       col-18 col-push-6
@@ -26,7 +26,6 @@ ReactDOM.render(
     <Col span={6} pull={18}>
       col-6 col-pull-18
     </Col>
-  </Row>,
-  mountNode,
+  </Row>
 );
 ```
diff --git a/components/grid/demo/useBreakpoint.md b/components/grid/demo/useBreakpoint.md
index caa3346e1b..2c61ae4725 100644
--- a/components/grid/demo/useBreakpoint.md
+++ b/components/grid/demo/useBreakpoint.md
@@ -32,5 +32,5 @@ function UseBreakpointDemo() {
   );
 }
 
-ReactDOM.render(<UseBreakpointDemo />, mountNode);
+export default () => <UseBreakpointDemo />;
 ```
diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
index 02557876b4..3f3db45634 100644
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@@ -23,7 +23,7 @@ import {
   LoadingOutlined,
 } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Space>
     <HomeOutlined />
     <SettingFilled />
@@ -31,7 +31,6 @@ ReactDOM.render(
     <SyncOutlined spin />
     <SmileOutlined rotate={180} />
     <LoadingOutlined />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md
index 27a46a161d..2b15f248c2 100644
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@@ -72,13 +72,12 @@ const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
 
 const PandaIcon = props => <Icon component={PandaSvg} {...props} />;
 
-ReactDOM.render(
+export default () => (
   <Space>
     <HeartIcon style={{ color: 'hotpink' }} />
     <PandaIcon style={{ fontSize: '32px' }} />
     <Icon component={HomeOutlined} />
     <HomeOutlined />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md
index 8ee6500dd3..6227afcc38 100644
--- a/components/icon/demo/iconfont.md
+++ b/components/icon/demo/iconfont.md
@@ -21,12 +21,11 @@ const IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
 });
 
-ReactDOM.render(
+export default () => (
   <Space>
     <IconFont type="icon-tuichu" />
     <IconFont type="icon-facebook" />
     <IconFont type="icon-twitter" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/icon/demo/scriptUrl.md b/components/icon/demo/scriptUrl.md
index 369efc9562..fa905183e5 100644
--- a/components/icon/demo/scriptUrl.md
+++ b/components/icon/demo/scriptUrl.md
@@ -24,13 +24,12 @@ const IconFont = createFromIconfontCN({
   ],
 });
 
-ReactDOM.render(
+export default () => (
   <Space>
     <IconFont type="icon-javascript" />
     <IconFont type="icon-java" />
     <IconFont type="icon-shoppingcart" />
     <IconFont type="icon-python" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/icon/demo/two-tone.md b/components/icon/demo/two-tone.md
index 0129093e57..6316df3086 100644
--- a/components/icon/demo/two-tone.md
+++ b/components/icon/demo/two-tone.md
@@ -17,12 +17,11 @@ You can set `twoToneColor` prop to specific primary color for two-tone icons.
 import { Space } from 'antd';
 import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Space>
     <SmileTwoTone />
     <HeartTwoTone twoToneColor="#eb2f96" />
     <CheckCircleTwoTone twoToneColor="#52c41a" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/image/demo/basic.md b/components/image/demo/basic.md
index 64f452a261..099ca1932c 100644
--- a/components/image/demo/basic.md
+++ b/components/image/demo/basic.md
@@ -25,5 +25,5 @@ function ImageDemo() {
   );
 }
 
-ReactDOM.render(<ImageDemo />, mountNode);
+export default () => <ImageDemo />;
 ```
diff --git a/components/image/demo/controlled-preview.md b/components/image/demo/controlled-preview.md
index b9e5f3f357..f318ec0ce9 100644
--- a/components/image/demo/controlled-preview.md
+++ b/components/image/demo/controlled-preview.md
@@ -40,5 +40,5 @@ function ImageDemo() {
   );
 }
 
-ReactDOM.render(<ImageDemo />, mountNode);
+export default () => <ImageDemo />;
 ```
diff --git a/components/image/demo/fallback.md b/components/image/demo/fallback.md
index 9fd4265748..63dff0f868 100644
--- a/components/image/demo/fallback.md
+++ b/components/image/demo/fallback.md
@@ -27,5 +27,5 @@ function ImageDemo() {
   );
 }
 
-ReactDOM.render(<ImageDemo />, mountNode);
+export default () => <ImageDemo />;
 ```
diff --git a/components/image/demo/placeholder.md b/components/image/demo/placeholder.md
index 94cd307da5..5124831a58 100644
--- a/components/image/demo/placeholder.md
+++ b/components/image/demo/placeholder.md
@@ -44,5 +44,5 @@ function ImageDemo() {
   );
 }
 
-ReactDOM.render(<ImageDemo />, mountNode);
+export default () => <ImageDemo />;
 ```
diff --git a/components/image/demo/preview-group-visible.md b/components/image/demo/preview-group-visible.md
index 3dcde29262..8c0c140524 100644
--- a/components/image/demo/preview-group-visible.md
+++ b/components/image/demo/preview-group-visible.md
@@ -38,5 +38,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/image/demo/preview-group.md b/components/image/demo/preview-group.md
index 03287f08c0..ae7beb0aa6 100644
--- a/components/image/demo/preview-group.md
+++ b/components/image/demo/preview-group.md
@@ -26,5 +26,5 @@ const App = () => (
   </Image.PreviewGroup>
 );
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/image/demo/preview-mask.md b/components/image/demo/preview-mask.md
index 9947f19666..21164661a6 100644
--- a/components/image/demo/preview-mask.md
+++ b/components/image/demo/preview-mask.md
@@ -37,7 +37,7 @@ function ImageDemo() {
   );
 }
 
-ReactDOM.render(<ImageDemo />, mountNode);
+export default () => <ImageDemo />;
 ```
 
 ```css
diff --git a/components/image/demo/previewSrc.md b/components/image/demo/previewSrc.md
index e20622b948..c01609f6a0 100644
--- a/components/image/demo/previewSrc.md
+++ b/components/image/demo/previewSrc.md
@@ -29,5 +29,5 @@ function ImageDemo() {
   );
 }
 
-ReactDOM.render(<ImageDemo />, mountNode);
+export default () => <ImageDemo />;
 ```
diff --git a/components/input-number/demo/addon.md b/components/input-number/demo/addon.md
index 399766341e..5c52725eb3 100644
--- a/components/input-number/demo/addon.md
+++ b/components/input-number/demo/addon.md
@@ -34,7 +34,7 @@ const selectAfter = (
   </Select>
 );
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
     <InputNumber addonBefore={selectBefore} addonAfter={selectAfter} defaultValue={100} />
@@ -43,7 +43,6 @@ ReactDOM.render(
       addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
       defaultValue={100}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md
index 3900194b91..363bd1260f 100644
--- a/components/input-number/demo/basic.md
+++ b/components/input-number/demo/basic.md
@@ -20,5 +20,5 @@ function onChange(value) {
   console.log('changed', value);
 }
 
-ReactDOM.render(<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />, mountNode);
+export default () => <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />;
 ```
diff --git a/components/input-number/demo/borderless.md b/components/input-number/demo/borderless.md
index c07d541588..ecd2f12c06 100644
--- a/components/input-number/demo/borderless.md
+++ b/components/input-number/demo/borderless.md
@@ -16,5 +16,5 @@ No border.
 ```jsx
 import { InputNumber } from 'antd';
 
-ReactDOM.render(<InputNumber min={1} max={10} defaultValue={3} bordered={false} />, mountNode);
+export default () => <InputNumber min={1} max={10} defaultValue={3} bordered={false} />;
 ```
diff --git a/components/input-number/demo/controls.md b/components/input-number/demo/controls.md
index e693a0a9e5..c0000d374d 100644
--- a/components/input-number/demo/controls.md
+++ b/components/input-number/demo/controls.md
@@ -18,8 +18,7 @@ When you need to use a custom `Icon`, you can set the `Icon` component as the pr
 import { InputNumber } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
-  <InputNumber controls={{ upIcon: <ArrowUpOutlined />, downIcon: <ArrowDownOutlined /> }} />,
-  mountNode,
+export default () => (
+  <InputNumber controls={{ upIcon: <ArrowUpOutlined />, downIcon: <ArrowDownOutlined /> }} />
 );
 ```
diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md
index 7266dee407..d8b59e62dc 100644
--- a/components/input-number/demo/digit.md
+++ b/components/input-number/demo/digit.md
@@ -20,7 +20,7 @@ function onChange(value: string) {
   console.log('changed', value);
 }
 
-ReactDOM.render(
+export default () => (
   <InputNumber<string>
     style={{ width: 200 }}
     defaultValue="1"
@@ -29,7 +29,6 @@ ReactDOM.render(
     step="0.00000000000001"
     onChange={onChange}
     stringMode
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
index bb8bb9142a..cb9610b1b2 100644
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -41,5 +41,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/input-number/demo/formatter.md b/components/input-number/demo/formatter.md
index db5a5be357..3d0709767f 100644
--- a/components/input-number/demo/formatter.md
+++ b/components/input-number/demo/formatter.md
@@ -24,7 +24,7 @@ function onChange(value) {
   console.log('changed', value);
 }
 
-ReactDOM.render(
+export default () => (
   <Space>
     <InputNumber
       defaultValue={1000}
@@ -40,7 +40,6 @@ ReactDOM.render(
       parser={value => value.replace('%', '')}
       onChange={onChange}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/input-number/demo/keyboard.md b/components/input-number/demo/keyboard.md
index d1ce9235ec..fb29701456 100644
--- a/components/input-number/demo/keyboard.md
+++ b/components/input-number/demo/keyboard.md
@@ -33,5 +33,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/input-number/demo/out-of-range.md b/components/input-number/demo/out-of-range.md
index 428d6145f7..97f287191c 100644
--- a/components/input-number/demo/out-of-range.md
+++ b/components/input-number/demo/out-of-range.md
@@ -34,5 +34,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/input-number/demo/prefix.md b/components/input-number/demo/prefix.md
index ff46961e53..c17967ea4e 100644
--- a/components/input-number/demo/prefix.md
+++ b/components/input-number/demo/prefix.md
@@ -17,7 +17,7 @@ Add a prefix inside input.
 import { InputNumber } from 'antd';
 import { InfoCircleOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <InputNumber prefix="￥" style={{ width: '100%' }} />
     <br />
@@ -26,7 +26,6 @@ ReactDOM.render(
     <br />
     <br />
     <InputNumber prefix="￥" disabled style={{ width: '100%' }} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md
index f7e95b5f8e..f40d47ef3e 100644
--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@@ -20,12 +20,11 @@ function onChange(value) {
   console.log('changed', value);
 }
 
-ReactDOM.render(
+export default () => (
   <Space>
     <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/input-number/demo/status.md b/components/input-number/demo/status.md
index 602cc98f59..6045bafacc 100644
--- a/components/input-number/demo/status.md
+++ b/components/input-number/demo/status.md
@@ -27,5 +27,5 @@ const ValidateInputs: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<ValidateInputs />, mountNode);
+export default () => <ValidateInputs />;
 ```
diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx
index edcdd4f99b..164c711eba 100644
--- a/components/input/__tests__/index.test.tsx
+++ b/components/input/__tests__/index.test.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 // eslint-disable-next-line import/no-unresolved
 import Form from '../../form';
 import Input, { InputProps, InputRef } from '..';
@@ -54,11 +56,11 @@ describe('Input', () => {
 
   describe('focus trigger warning', () => {
     it('not trigger', () => {
-      const wrapper = mount(<Input suffix="bamboo" />);
-      (wrapper.find('input').instance() as any).focus();
-      wrapper.setProps({
-        suffix: 'light',
-      });
+      const { container, rerender } = render(<Input suffix="bamboo" />);
+
+      fireEvent.focus(container.querySelector('input')!);
+
+      rerender(<Input suffix="light" />);
       expect(errorSpy).not.toHaveBeenCalled();
     });
     it('trigger warning', () => {
diff --git a/components/input/__tests__/textarea.test.js b/components/input/__tests__/textarea.test.js
index f2867a2702..2b8701ff94 100644
--- a/components/input/__tests__/textarea.test.js
+++ b/components/input/__tests__/textarea.test.js
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import RcTextArea from 'rc-textarea';
 import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
@@ -35,18 +37,32 @@ describe('TextArea', () => {
 
     const ref = React.createRef();
 
-    const wrapper = mount(
-      <TextArea value="" readOnly autoSize={{ minRows: 2, maxRows: 6 }} wrap="off" ref={ref} />,
+    const genTextArea = (props = {}) => (
+      <TextArea
+        value=""
+        readOnly
+        autoSize={{ minRows: 2, maxRows: 6 }}
+        wrap="off"
+        ref={ref}
+        {...props}
+      />
     );
+
+    const { container, rerender } = render(genTextArea());
+
     const mockFunc = jest.spyOn(ref.current.resizableTextArea, 'resizeTextarea');
-    wrapper.setProps({ value: '1111\n2222\n3333' });
+
+    rerender(genTextArea({ value: '1111\n2222\n3333' }));
+    // wrapper.setProps({ value: '1111\n2222\n3333' });
     await sleep(0);
     expect(mockFunc).toHaveBeenCalledTimes(1);
-    wrapper.setProps({ value: '1111' });
+
+    rerender(genTextArea({ value: '1111' }));
+    // wrapper.setProps({ value: '1111' });
     await sleep(0);
     expect(mockFunc).toHaveBeenCalledTimes(2);
-    wrapper.update();
-    expect(wrapper.find('textarea').props().style.overflow).toBeFalsy();
+
+    expect(container.querySelector('textarea').style.overflow).toBeFalsy();
 
     expect(errorSpy).not.toHaveBeenCalled();
     errorSpy.mockRestore();
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index 31426e1d64..985931c805 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -34,7 +34,7 @@ const selectAfter = (
   </Select>
 );
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
     <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
@@ -44,8 +44,7 @@ ReactDOM.render(
       addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
       defaultValue="mysite"
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
 
diff --git a/components/input/demo/align.md b/components/input/demo/align.md
index f619ddb1ab..87434c7499 100644
--- a/components/input/demo/align.md
+++ b/components/input/demo/align.md
@@ -65,7 +65,7 @@ const options = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <>
     <Mentions style={{ width: 100 }} rows={1} />
     <Input.TextArea rows={1} style={{ width: 100 }} />
@@ -99,7 +99,6 @@ ReactDOM.render(
     <Input style={narrowStyle} suffix="Y" />
     <Input style={narrowStyle} />
     <Input style={narrowStyle} defaultValue="1" suffix="Y" />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/allowClear.md b/components/input/demo/allowClear.md
index ad2676cdd0..ff74e57a40 100644
--- a/components/input/demo/allowClear.md
+++ b/components/input/demo/allowClear.md
@@ -22,13 +22,12 @@ const onChange = e => {
   console.log(e);
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <Input placeholder="input with clear icon" allowClear onChange={onChange} />
     <br />
     <br />
     <TextArea placeholder="textarea with clear icon" allowClear onChange={onChange} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index e2af09e34a..c409a25dac 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -50,5 +50,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/input/demo/basic.md b/components/input/demo/basic.md
index 1bb077961d..4305cdea10 100644
--- a/components/input/demo/basic.md
+++ b/components/input/demo/basic.md
@@ -16,5 +16,5 @@ Basic usage example.
 ```jsx
 import { Input } from 'antd';
 
-ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);
+export default () => <Input placeholder="Basic usage" />;
 ```
diff --git a/components/input/demo/borderless-debug.md b/components/input/demo/borderless-debug.md
index a860b5176d..d67f72e405 100644
--- a/components/input/demo/borderless-debug.md
+++ b/components/input/demo/borderless-debug.md
@@ -19,7 +19,7 @@ import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-ReactDOM.render(
+export default () => (
   <div style={{ backgroundColor: 'rgba(0, 0, 128, .2)' }}>
     <Input placeholder="Unbordered" bordered={false} />
     <Input placeholder="Unbordered" bordered={false} size="large" />
@@ -28,7 +28,6 @@ ReactDOM.render(
     <Input placeholder="Unbordered" bordered={false} allowClear />
     <Input prefix="￥" suffix="RMB" bordered={false} />
     <Input prefix="￥" suffix="RMB" disabled bordered={false} />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/input/demo/borderless.md b/components/input/demo/borderless.md
index 30a5c4102a..ba0dd94aa8 100644
--- a/components/input/demo/borderless.md
+++ b/components/input/demo/borderless.md
@@ -16,5 +16,5 @@ No border.
 ```jsx
 import { Input } from 'antd';
 
-ReactDOM.render(<Input placeholder="Borderless" bordered={false} />, mountNode);
+export default () => <Input placeholder="Borderless" bordered={false} />;
 ```
diff --git a/components/input/demo/focus.md b/components/input/demo/focus.md
index 1aad7caf09..25e83f89b5 100644
--- a/components/input/demo/focus.md
+++ b/components/input/demo/focus.md
@@ -80,5 +80,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index 9b82fd7d48..734d839d54 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -194,7 +194,7 @@ const App = () => (
   </div>
 );
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/input/demo/password-input.md b/components/input/demo/password-input.md
index 5b293b64b7..1e3664fd15 100644
--- a/components/input/demo/password-input.md
+++ b/components/input/demo/password-input.md
@@ -17,14 +17,13 @@ Input type of password.
 import { Input, Space } from 'antd';
 import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Input.Password placeholder="input password" />
     <Input.Password
       placeholder="input password"
       iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index cf3979c40a..d0d3b01499 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -17,7 +17,7 @@ Add a prefix or suffix icons inside input.
 import { Input, Tooltip } from 'antd';
 import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Input
       placeholder="Enter your username"
@@ -34,7 +34,6 @@ ReactDOM.render(
     <br />
     <br />
     <Input prefix="￥" suffix="RMB" disabled />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/search-input-loading.md b/components/input/demo/search-input-loading.md
index f61dd52a13..bbf7008982 100644
--- a/components/input/demo/search-input-loading.md
+++ b/components/input/demo/search-input-loading.md
@@ -18,7 +18,7 @@ import { Input } from 'antd';
 
 const { Search } = Input;
 
-ReactDOM.render(
+export default () => (
   <>
     <Search placeholder="input search loading default" loading />
     <br />
@@ -27,7 +27,6 @@ ReactDOM.render(
     <br />
     <br />
     <Search placeholder="input search text" enterButton="Search" size="large" loading />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
index c26abbfc67..1f137ee904 100644
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -30,7 +30,7 @@ const suffix = (
 
 const onSearch = value => console.log(value);
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
     <Search placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 200 }} />
@@ -56,7 +56,6 @@ ReactDOM.render(
       suffix={suffix}
       onSearch={onSearch}
     />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/input/demo/show-count.md b/components/input/demo/show-count.md
index 15aecfa975..1ff260ae91 100644
--- a/components/input/demo/show-count.md
+++ b/components/input/demo/show-count.md
@@ -22,13 +22,12 @@ const onChange = e => {
   console.log('Change:', e.target.value);
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <Input showCount maxLength={20} onChange={onChange} />
     <br />
     <br />
     <TextArea showCount maxLength={100} onChange={onChange} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
index a6719a77af..b219ec483d 100644
--- a/components/input/demo/size.md
+++ b/components/input/demo/size.md
@@ -17,7 +17,7 @@ There are three sizes of an Input box: `large` (40px), `default` (32px) and `sma
 import { Input } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
     <br />
@@ -26,7 +26,6 @@ ReactDOM.render(
     <br />
     <br />
     <Input size="small" placeholder="small size" prefix={<UserOutlined />} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/status.md b/components/input/demo/status.md
index f766a34309..efaee5b53a 100644
--- a/components/input/demo/status.md
+++ b/components/input/demo/status.md
@@ -27,5 +27,5 @@ const ValidateInputs: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<ValidateInputs />, mountNode);
+export default () => <ValidateInputs />;
 ```
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
index eeef822934..4bf9f9496c 100644
--- a/components/input/demo/textarea-resize.md
+++ b/components/input/demo/textarea-resize.md
@@ -45,5 +45,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/input/demo/textarea-show-count.md b/components/input/demo/textarea-show-count.md
index be0f18dfb3..44779aa8a4 100644
--- a/components/input/demo/textarea-show-count.md
+++ b/components/input/demo/textarea-show-count.md
@@ -22,8 +22,7 @@ const onChange = e => {
   console.log('Change:', e.target.value);
 };
 
-ReactDOM.render(
-  <TextArea showCount maxLength={100} style={{ height: 120 }} onChange={onChange} />,
-  mountNode,
+export default () => (
+  <TextArea showCount maxLength={100} style={{ height: 120 }} onChange={onChange} />
 );
 ```
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
index caa2248941..0e97e5cbf6 100644
--- a/components/input/demo/textarea.md
+++ b/components/input/demo/textarea.md
@@ -18,13 +18,12 @@ import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-ReactDOM.render(
+export default () => (
   <>
     <TextArea rows={4} />
     <br />
     <br />
     <TextArea rows={4} placeholder="maxLength is 6" maxLength={6} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index 9fcda74281..e8befee9a3 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -97,7 +97,7 @@ class NumericInputDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<NumericInputDemo />, mountNode);
+export default () => <NumericInputDemo />;
 ```
 
 ```css
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 328831afbc..2660777ec9 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -18,7 +18,7 @@ import { Layout } from 'antd';
 
 const { Header, Footer, Sider, Content } = Layout;
 
-ReactDOM.render(
+export default () => (
   <>
     <Layout>
       <Header>Header</Header>
@@ -52,8 +52,7 @@ ReactDOM.render(
         <Footer>Footer</Footer>
       </Layout>
     </Layout>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md
index 27248de6e4..ec7e59854a 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -122,7 +122,7 @@ class SiderDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<SiderDemo />, mountNode);
+export default () => <SiderDemo />;
 ```
 
 ```css
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 073c6dc60a..1cb3e255c3 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -87,7 +87,7 @@ class SiderDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<SiderDemo />, mountNode);
+export default () => <SiderDemo />;
 ```
 
 ```css
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index 97e2dd027b..b949e877f2 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -44,7 +44,7 @@ const items: MenuProps['items'] = [
   label: `nav ${index + 1}`,
 }));
 
-ReactDOM.render(
+export default () => (
   <Layout hasSider>
     <Sider
       style={{
@@ -162,8 +162,7 @@ ReactDOM.render(
       </Content>
       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
     </Layout>
-  </Layout>,
-  mountNode,
+  </Layout>
 );
 ```
 
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index d7337d21a6..8d48023926 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -19,7 +19,7 @@ import { Layout, Menu, Breadcrumb } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-ReactDOM.render(
+export default () => (
   <Layout>
     <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
       <div className="logo" />
@@ -44,8 +44,7 @@ ReactDOM.render(
       </div>
     </Content>
     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>,
-  mountNode,
+  </Layout>
 );
 ```
 
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index e754b45a66..5653a26f11 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -23,7 +23,7 @@ import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/i
 
 const { Header, Content, Footer, Sider } = Layout;
 
-ReactDOM.render(
+export default () => (
   <Layout>
     <Sider
       breakpoint="lg"
@@ -58,8 +58,7 @@ ReactDOM.render(
       </Content>
       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
     </Layout>
-  </Layout>,
-  mountNode,
+  </Layout>
 );
 ```
 
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index fff58d24a3..dd1dc96d57 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -98,7 +98,7 @@ class SiderDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<SiderDemo />, mountNode);
+export default () => <SiderDemo />;
 ```
 
 ```css
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index a3d2a03f47..9d050ebe02 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -44,7 +44,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-ReactDOM.render(
+export default () => (
   <Layout>
     <Header className="header">
       <div className="logo" />
@@ -78,8 +78,7 @@ ReactDOM.render(
         </Content>
       </Layout>
     </Layout>
-  </Layout>,
-  mountNode,
+  </Layout>
 );
 ```
 
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 320314caf4..e6082f3248 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -44,7 +44,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-ReactDOM.render(
+export default () => (
   <Layout>
     <Header className="header">
       <div className="logo" />
@@ -70,8 +70,7 @@ ReactDOM.render(
       </Layout>
     </Content>
     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>,
-  mountNode,
+  </Layout>
 );
 ```
 
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index cc016516f2..ecb3fb86a1 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -24,7 +24,7 @@ import { Layout, Menu, Breadcrumb } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-ReactDOM.render(
+export default () => (
   <Layout className="layout">
     <Header>
       <div className="logo" />
@@ -50,8 +50,7 @@ ReactDOM.render(
       <div className="site-layout-content">Content</div>
     </Content>
     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>,
-  mountNode,
+  </Layout>
 );
 ```
 
diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
index f750a50c4a..28b43408c3 100644
--- a/components/list/demo/basic.md
+++ b/components/list/demo/basic.md
@@ -31,7 +31,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <List
     itemLayout="horizontal"
     dataSource={data}
@@ -44,7 +44,6 @@ ReactDOM.render(
         />
       </List.Item>
     )}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/list/demo/grid-test.md b/components/list/demo/grid-test.md
index ba1e05fee8..88e9f5bc3b 100644
--- a/components/list/demo/grid-test.md
+++ b/components/list/demo/grid-test.md
@@ -44,7 +44,7 @@ const ListItem = () => (
   </List.Item>
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <List
       grid={{ gutter: 16, column: 4 }}
@@ -66,7 +66,6 @@ ReactDOM.render(
         </>
       )}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/list/demo/grid.md b/components/list/demo/grid.md
index 6af8c75823..2720fdeda9 100644
--- a/components/list/demo/grid.md
+++ b/components/list/demo/grid.md
@@ -31,7 +31,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <List
     grid={{ gutter: 16, column: 4 }}
     dataSource={data}
@@ -40,7 +40,6 @@ ReactDOM.render(
         <Card title={item.title}>Card content</Card>
       </List.Item>
     )}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
index d66bc39d7f..160093e548 100644
--- a/components/list/demo/infinite-load.md
+++ b/components/list/demo/infinite-load.md
@@ -78,5 +78,5 @@ const InfiniteListExample = () => {
   );
 };
 
-ReactDOM.render(<InfiniteListExample />, mountNode);
+export default () => <InfiniteListExample />;
 ```
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index 0ba11a8e92..7ef72d592f 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -108,7 +108,7 @@ class LoadMoreList extends React.Component {
   }
 }
 
-ReactDOM.render(<LoadMoreList />, mountNode);
+export default () => <LoadMoreList />;
 ```
 
 ```css
diff --git a/components/list/demo/responsive.md b/components/list/demo/responsive.md
index 4852836257..c253c7c9bd 100644
--- a/components/list/demo/responsive.md
+++ b/components/list/demo/responsive.md
@@ -37,7 +37,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <List
     grid={{
       gutter: 16,
@@ -54,7 +54,6 @@ ReactDOM.render(
         <Card title={item.title}>Card content</Card>
       </List.Item>
     )}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md
index f473043f18..938a503652 100644
--- a/components/list/demo/simple.md
+++ b/components/list/demo/simple.md
@@ -32,7 +32,7 @@ const data = [
   'Los Angeles battles huge wildfires.',
 ];
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Default Size</Divider>
     <List
@@ -64,7 +64,6 @@ ReactDOM.render(
       dataSource={data}
       renderItem={item => <List.Item>{item}</List.Item>}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md
index eb150697ec..a49cd0c79a 100644
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@@ -37,7 +37,7 @@ const IconText = ({ icon, text }) => (
   </Space>
 );
 
-ReactDOM.render(
+export default () => (
   <List
     itemLayout="vertical"
     size="large"
@@ -77,7 +77,6 @@ ReactDOM.render(
         {item.content}
       </List.Item>
     )}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/list/demo/virtual-list.md b/components/list/demo/virtual-list.md
index ae3f531fdf..f497f3c42e 100644
--- a/components/list/demo/virtual-list.md
+++ b/components/list/demo/virtual-list.md
@@ -68,5 +68,5 @@ const VirtualizedExample = () => {
   );
 };
 
-ReactDOM.render(<VirtualizedExample />, mountNode);
+export default () => <VirtualizedExample />;
 ```
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 0f4ba9718d..2ae2af1dc1 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -53,7 +53,7 @@ export interface ListProps<T> {
 }
 
 export interface ListLocale {
-  emptyText: React.ReactNode | (() => React.ReactNode);
+  emptyText: React.ReactNode;
 }
 
 export interface ListConsumerProps {
diff --git a/components/locale-provider/LocaleReceiver.tsx b/components/locale-provider/LocaleReceiver.tsx
index 0d75cf76a4..24370c6014 100644
--- a/components/locale-provider/LocaleReceiver.tsx
+++ b/components/locale-provider/LocaleReceiver.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import defaultLocaleData from './default';
 import LocaleContext from './context';
+import type { LocaleContextProps } from './context';
 import { Locale } from '.';
 
 export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
@@ -8,11 +9,7 @@ export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
 export interface LocaleReceiverProps<C extends LocaleComponentName = LocaleComponentName> {
   componentName: C;
   defaultLocale?: Locale[C] | (() => Locale[C]);
-  children: (
-    locale: Exclude<Locale[C], undefined>,
-    localeCode?: string,
-    fullLocale?: object,
-  ) => React.ReactNode;
+  children: (locale: Locale[C], localeCode?: string, fullLocale?: object) => React.ReactNode;
 }
 
 export default class LocaleReceiver<
@@ -24,7 +21,9 @@ export default class LocaleReceiver<
 
   static contextType = LocaleContext;
 
-  getLocale(): Exclude<Locale[C], undefined> {
+  context: LocaleContextProps;
+
+  getLocale(): Locale[C] {
     const { componentName, defaultLocale } = this.props;
     const locale = defaultLocale || defaultLocaleData[componentName ?? 'global'];
     const antLocale = this.context;
diff --git a/components/locale-provider/__tests__/config.test.js b/components/locale-provider/__tests__/config.test.js
index 77cc6cdc7b..50723fb3e0 100644
--- a/components/locale-provider/__tests__/config.test.js
+++ b/components/locale-provider/__tests__/config.test.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import ConfigProvider from '../../config-provider';
 import { Modal } from '../..';
+import { sleep } from '../../../tests/utils';
 import zhCN from '../zh_CN';
 
 class Demo extends React.Component {
@@ -19,7 +21,7 @@ class Demo extends React.Component {
 }
 
 describe('Locale Provider demo', () => {
-  it('change type', () => {
+  it('change type', async () => {
     jest.useFakeTimers();
 
     const BasicExample = () => {
@@ -48,10 +50,19 @@ describe('Locale Provider demo', () => {
       );
     };
     const wrapper = mount(<BasicExample />);
+
     wrapper.find('.about').at(0).simulate('click');
-    jest.runAllTimers();
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     wrapper.find('.dashboard').at(0).simulate('click');
-    jest.runAllTimers();
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     expect(document.body.querySelectorAll('.ant-btn-primary span')[0].textContent).toBe('确 定');
     Modal.destroyAll();
     jest.useRealTimers();
diff --git a/components/locale-provider/context.ts b/components/locale-provider/context.ts
index 68ade79b1f..897554637a 100644
--- a/components/locale-provider/context.ts
+++ b/components/locale-provider/context.ts
@@ -1,6 +1,8 @@
 import { createContext } from 'react';
 import { Locale } from '.';
 
-const LocaleContext = createContext<(Partial<Locale> & { exist?: boolean }) | undefined>(undefined);
+export type LocaleContextProps = Partial<Locale> & { exist?: boolean };
+
+const LocaleContext = createContext<LocaleContextProps | undefined>(undefined);
 
 export default LocaleContext;
diff --git a/components/locale/de_DE.tsx b/components/locale/de_DE.tsx
index 1497b66c01..042ca102f3 100644
--- a/components/locale/de_DE.tsx
+++ b/components/locale/de_DE.tsx
@@ -20,10 +20,12 @@ const localeValues: Locale = {
     filterTitle: 'Filter-Menü',
     filterConfirm: 'OK',
     filterReset: 'Zurücksetzen',
+    filterSearchPlaceholder: 'Suche in Filtern',
     selectAll: 'Selektiere Alle',
     selectInvert: 'Selektion Invertieren',
     selectionAll: 'Wählen Sie alle Daten aus',
     sortTitle: 'Sortieren',
+    emptyText: 'Keine Daten',
     expand: 'Zeile erweitern',
     collapse: 'Zeile reduzieren',
     triggerDesc: 'Klicken zur absteigenden  Sortierung',
diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md
index b3bd078340..f686e01c6d 100644
--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@@ -75,7 +75,7 @@ class AsyncMention extends React.Component {
   }
 }
 
-ReactDOM.render(<AsyncMention />, mountNode);
+export default () => <AsyncMention />;
 ```
 
 <style>
diff --git a/components/mentions/demo/autoSize.md b/components/mentions/demo/autoSize.md
index 8d332ed444..8bc9628db8 100644
--- a/components/mentions/demo/autoSize.md
+++ b/components/mentions/demo/autoSize.md
@@ -18,12 +18,11 @@ import { Mentions } from 'antd';
 
 const { Option } = Mentions;
 
-ReactDOM.render(
+export default () => (
   <Mentions autoSize style={{ width: '100%' }}>
     <Option value="afc163">afc163</Option>
     <Option value="zombieJ">zombieJ</Option>
     <Option value="yesmeck">yesmeck</Option>
-  </Mentions>,
-  mountNode,
+  </Mentions>
 );
 ```
diff --git a/components/mentions/demo/basic.md b/components/mentions/demo/basic.md
index 1939e41387..878dc1251b 100644
--- a/components/mentions/demo/basic.md
+++ b/components/mentions/demo/basic.md
@@ -26,7 +26,7 @@ function onSelect(option) {
   console.log('select', option);
 }
 
-ReactDOM.render(
+export default () => (
   <Mentions
     style={{ width: '100%' }}
     onChange={onChange}
@@ -36,7 +36,6 @@ ReactDOM.render(
     <Option value="afc163">afc163</Option>
     <Option value="zombieJ">zombieJ</Option>
     <Option value="yesmeck">yesmeck</Option>
-  </Mentions>,
-  mountNode,
+  </Mentions>
 );
 ```
diff --git a/components/mentions/demo/form.md b/components/mentions/demo/form.md
index 5ed4bb7f38..7cd4d7df87 100644
--- a/components/mentions/demo/form.md
+++ b/components/mentions/demo/form.md
@@ -83,5 +83,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/mentions/demo/placement.md b/components/mentions/demo/placement.md
index 450a71eec2..1eef269c5e 100644
--- a/components/mentions/demo/placement.md
+++ b/components/mentions/demo/placement.md
@@ -18,12 +18,11 @@ import { Mentions } from 'antd';
 
 const { Option } = Mentions;
 
-ReactDOM.render(
+export default () => (
   <Mentions style={{ width: '100%' }} placement="top">
     <Option value="afc163">afc163</Option>
     <Option value="zombieJ">zombieJ</Option>
     <Option value="yesmeck">yesmeck</Option>
-  </Mentions>,
-  mountNode,
+  </Mentions>
 );
 ```
diff --git a/components/mentions/demo/prefix.md b/components/mentions/demo/prefix.md
index f70a73ad37..7723b355ff 100644
--- a/components/mentions/demo/prefix.md
+++ b/components/mentions/demo/prefix.md
@@ -52,5 +52,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/mentions/demo/readonly.md b/components/mentions/demo/readonly.md
index 93c9917cc3..a9a6397513 100644
--- a/components/mentions/demo/readonly.md
+++ b/components/mentions/demo/readonly.md
@@ -41,5 +41,5 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/mentions/demo/status.md b/components/mentions/demo/status.md
index 5d64166744..6a530dad97 100644
--- a/components/mentions/demo/status.md
+++ b/components/mentions/demo/status.md
@@ -47,5 +47,5 @@ const MentionsStatuses = () => {
   );
 };
 
-ReactDOM.render(<MentionsStatuses />, mountNode);
+export default () => <MentionsStatuses />;
 ```
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
index f766b63673..ca49d1f5cc 100644
--- a/components/menu/__tests__/index.test.js
+++ b/components/menu/__tests__/index.test.js
@@ -7,6 +7,8 @@ import {
   PieChartOutlined,
   UserOutlined,
 } from '@ant-design/icons';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import Menu from '..';
 import Layout from '../../layout';
@@ -15,62 +17,75 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import collapseMotion from '../../_util/motion';
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 const { SubMenu } = Menu;
 
 const noop = () => {};
 
-const expectSubMenuBehavior = (menu, enter = noop, leave = noop) => {
-  if (!menu.prop('openKeys') && !menu.prop('defaultOpenKeys')) {
-    expect(menu.find('ul.ant-menu-sub').length).toBe(0);
-  }
-  menu.update();
-  expect(menu.find('ul.ant-menu-sub').length).toBe(0);
-  const AnimationClassNames = {
-    horizontal: 'ant-slide-up-leave',
-    inline: 'ant-motion-collapse-leave',
-    vertical: 'ant-zoom-big-leave',
-  };
-  const mode = menu.prop('mode') || 'horizontal';
-
-  act(() => {
-    enter();
-    jest.runAllTimers();
-    menu.update();
-  });
-
-  function getSubMenu() {
-    if (mode === 'inline') {
-      return menu.find('ul.ant-menu-sub.ant-menu-inline').hostNodes().at(0);
-    }
-    return menu.find('div.ant-menu-submenu-popup').hostNodes().at(0);
-  }
-
-  expect(
-    getSubMenu().hasClass('ant-menu-hidden') || getSubMenu().hasClass(AnimationClassNames[mode]),
-  ).toBeFalsy();
-
-  act(() => {
-    leave();
-    jest.runAllTimers();
-    menu.update();
-  });
-
-  if (getSubMenu().length) {
-    expect(
-      getSubMenu().hasClass('ant-menu-hidden') || getSubMenu().hasClass(AnimationClassNames[mode]),
-    ).toBeTruthy();
-  }
-};
-
 describe('Menu', () => {
-  window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
-  window.cancelAnimationFrame = window.clearTimeout;
+  function triggerAllTimer() {
+    for (let i = 0; i < 10; i += 1) {
+      act(() => {
+        jest.runAllTimers();
+      });
+    }
+  }
 
-  beforeAll(() => {
+  const expectSubMenuBehavior = (defaultProps, instance, enter = noop, leave = noop) => {
+    const { container } = instance;
+
+    expect(container.querySelectorAll('ul.ant-menu-sub')).toHaveLength(0);
+    const AnimationClassNames = {
+      horizontal: 'ant-slide-up-leave',
+      inline: 'ant-motion-collapse-leave',
+      vertical: 'ant-zoom-big-leave',
+    };
+    const mode = defaultProps.mode || 'horizontal';
+
+    act(() => {
+      enter();
+    });
+
+    // React concurrent may delay creat this
+    triggerAllTimer();
+
+    function getSubMenu() {
+      if (mode === 'inline') {
+        return container.querySelector('ul.ant-menu-sub.ant-menu-inline');
+      }
+      return container.querySelector('div.ant-menu-submenu-popup');
+    }
+
+    expect(
+      getSubMenu().classList.contains('ant-menu-hidden') ||
+        getSubMenu().classList.contains(AnimationClassNames[mode]),
+    ).toBeFalsy();
+
+    act(() => {
+      leave();
+    });
+
+    // React concurrent may delay creat this
+    triggerAllTimer();
+
+    if (getSubMenu()) {
+      expect(
+        getSubMenu().classList.contains('ant-menu-hidden') ||
+          getSubMenu().classList.contains(AnimationClassNames[mode]),
+      ).toBeTruthy();
+    }
+  };
+
+  // window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
+  // window.cancelAnimationFrame = window.clearTimeout;
+
+  beforeEach(() => {
     jest.useFakeTimers();
+    jest.clearAllTimers();
   });
 
-  afterAll(() => {
+  afterEach(() => {
     jest.useRealTimers();
   });
 
@@ -236,54 +251,73 @@ describe('Menu', () => {
     expect(wrapper.find('PopupTrigger').first().prop('visible')).toBeTruthy();
   });
 
-  it('test submenu in mode horizontal', () => {
-    const wrapper = mount(
-      <Menu mode="horizontal">
+  it('test submenu in mode horizontal', async () => {
+    const defaultProps = {
+      mode: 'horizontal',
+    };
+
+    const Demo = props => (
+      <Menu {...defaultProps} {...props}>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
         </SubMenu>
         <Menu.Item key="2">menu2</Menu.Item>
-      </Menu>,
+      </Menu>
     );
+
+    const instance = render(<Demo />);
+
     expectSubMenuBehavior(
-      wrapper,
-      () => wrapper.setProps({ openKeys: ['1'] }),
-      () => wrapper.setProps({ openKeys: [] }),
+      defaultProps,
+      instance,
+      () => instance.rerender(<Demo openKeys={['1']} />),
+      () => instance.rerender(<Demo openKeys={[]} />),
     );
+
+    instance.rerender(<Demo openKeys={['1']} />);
   });
 
   it('test submenu in mode inline', () => {
-    const wrapper = mount(
-      <Menu mode="inline">
+    const defaultProps = { mode: 'inline' };
+
+    const Demo = props => (
+      <Menu {...defaultProps} {...props}>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
         </SubMenu>
         <Menu.Item key="2">menu2</Menu.Item>
-      </Menu>,
+      </Menu>
     );
+    const instance = render(<Demo />);
     expectSubMenuBehavior(
-      wrapper,
-      () => wrapper.setProps({ openKeys: ['1'] }),
-      () => wrapper.setProps({ openKeys: [] }),
+      defaultProps,
+      instance,
+      () => instance.rerender(<Demo openKeys={['1']} />),
+      () => instance.rerender(<Demo openKeys={[]} />),
     );
   });
 
   it('test submenu in mode vertical', () => {
-    const wrapper = mount(
-      <Menu mode="vertical" openTransitionName="">
+    const defaultProps = { mode: 'vertical', openTransitionName: '' };
+
+    const Demo = props => (
+      <Menu {...defaultProps} {...props}>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
         </SubMenu>
         <Menu.Item key="2">menu2</Menu.Item>
-      </Menu>,
+      </Menu>
     );
+
+    const instance = render(<Demo />);
     expectSubMenuBehavior(
-      wrapper,
-      () => wrapper.setProps({ openKeys: ['1'] }),
-      () => wrapper.setProps({ openKeys: [] }),
+      defaultProps,
+      instance,
+      () => instance.rerender(<Demo openKeys={['1']} />),
+      () => instance.rerender(<Demo openKeys={[]} />),
     );
   });
 
@@ -292,7 +326,7 @@ describe('Menu', () => {
 
     menuModesWithPopupSubMenu.forEach(menuMode => {
       it(`when menu is mode ${menuMode}`, () => {
-        const wrapper = mount(
+        const { container } = render(
           <Menu mode={menuMode} openKeys={['1']} theme="dark">
             <SubMenu key="1" title="submenu1" theme="light">
               <Menu.Item key="submenu1">Option 1</Menu.Item>
@@ -304,11 +338,10 @@ describe('Menu', () => {
 
         act(() => {
           jest.runAllTimers();
-          wrapper.update();
         });
 
-        expect(wrapper.find('ul.ant-menu-root').hasClass('ant-menu-dark')).toBeTruthy();
-        expect(wrapper.find('div.ant-menu-submenu-popup').hasClass('ant-menu-light')).toBeTruthy();
+        expect(container.querySelector('ul.ant-menu-root')).toHaveClass('ant-menu-dark');
+        expect(container.querySelector('div.ant-menu-submenu-popup')).toHaveClass('ant-menu-light');
       });
     });
   });
@@ -317,7 +350,7 @@ describe('Menu', () => {
   // https://github.com/ant-design/ant-design/issues/4692
   // TypeError: Cannot read property 'indexOf' of undefined
   it('pr #4677 and issue #4692', () => {
-    const wrapper = mount(
+    render(
       <Menu mode="horizontal">
         <SubMenu title="submenu">
           <Menu.Item key="1">menu1</Menu.Item>
@@ -325,25 +358,32 @@ describe('Menu', () => {
         </SubMenu>
       </Menu>,
     );
-    wrapper.update();
+
+    act(() => {
+      jest.runAllTimers();
+    });
     // just expect no error emit
   });
 
   it('should always follow openKeys when mode is switched', () => {
-    const wrapper = mount(
-      <Menu openKeys={['1']} mode="inline">
+    const Demo = props => (
+      <Menu openKeys={['1']} mode="inline" {...props}>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
           <Menu.Item key="submenu2">Option 2</Menu.Item>
         </SubMenu>
         <Menu.Item key="2">menu2</Menu.Item>
-      </Menu>,
+      </Menu>
     );
-    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-    wrapper.setProps({ mode: 'vertical' });
-    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-    wrapper.setProps({ mode: 'inline' });
-    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
+
+    const { container, rerender } = render(<Demo />);
+    expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden');
+
+    rerender(<Demo mode="vertical" />);
+    expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden');
+
+    rerender(<Demo mode="inline" />);
+    expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden');
   });
 
   it('should always follow openKeys when inlineCollapsed is switched', () => {
@@ -383,8 +423,8 @@ describe('Menu', () => {
   });
 
   it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
-    const wrapper = mount(
-      <Menu defaultOpenKeys={['not-existed']} mode="inline">
+    const Demo = props => (
+      <Menu defaultOpenKeys={['not-existed']} mode="inline" {...props}>
         <Menu.Item key="menu1" icon={<InboxOutlined />}>
           Option
         </Menu.Item>
@@ -392,28 +432,30 @@ describe('Menu', () => {
           <Menu.Item key="submenu1">Option</Menu.Item>
           <Menu.Item key="submenu2">Option</Menu.Item>
         </SubMenu>
-      </Menu>,
+      </Menu>
     );
-    expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-    wrapper.setProps({ inlineCollapsed: true });
-    jest.runAllTimers();
-    wrapper.update();
-    wrapper.simulate('transitionEnd', { propertyName: 'width' });
+    const { container, rerender } = render(<Demo />);
 
+    expect(container.querySelectorAll('.ant-menu-sub')).toHaveLength(0);
+
+    rerender(<Demo inlineCollapsed />);
     act(() => {
       jest.runAllTimers();
-      wrapper.update();
     });
 
-    wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter');
-    jest.runAllTimers();
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(
-      true,
-    );
-    expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true);
-    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
-    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
+    const transitionEndEvent = new Event('transitionend');
+    fireEvent(container.querySelector('ul'), transitionEndEvent);
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    fireEvent.mouseEnter(container.querySelector('.ant-menu-submenu-title'));
+    triggerAllTimer();
+
+    expect(container.querySelector('.ant-menu-submenu')).toHaveClass('ant-menu-submenu-vertical');
+    expect(container.querySelector('.ant-menu-submenu')).toHaveClass('ant-menu-submenu-open');
+    expect(container.querySelector('ul.ant-menu-sub')).toHaveClass('ant-menu-vertical');
+    expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden');
   });
 
   it('inlineCollapsed Menu.Item Tooltip can be removed', () => {
@@ -451,26 +493,32 @@ describe('Menu', () => {
   });
 
   describe('open submenu when click submenu title', () => {
-    const toggleMenu = (wrapper, index, event) => {
-      wrapper.find('.ant-menu-submenu-title').at(index).simulate(event);
-      jest.runAllTimers();
-      wrapper.update();
+    const toggleMenu = (instance, index, event) => {
+      fireEvent[event](instance.container.querySelectorAll('.ant-menu-submenu-title')[index]);
+
+      triggerAllTimer();
     };
 
     it('inline', () => {
-      const wrapper = mount(
-        <Menu mode="inline">
+      const defaultProps = { mode: 'inline' };
+
+      const Demo = props => (
+        <Menu {...defaultProps} {...props}>
           <SubMenu key="1" title="submenu1">
             <Menu.Item key="submenu1">Option 1</Menu.Item>
             <Menu.Item key="submenu2">Option 2</Menu.Item>
           </SubMenu>
           <Menu.Item key="2">menu2</Menu.Item>
-        </Menu>,
+        </Menu>
       );
+
+      const instance = render(<Demo />);
+
       expectSubMenuBehavior(
-        wrapper,
-        () => toggleMenu(wrapper, 0, 'click'),
-        () => toggleMenu(wrapper, 0, 'click'),
+        defaultProps,
+        instance,
+        () => toggleMenu(instance, 0, 'click'),
+        () => toggleMenu(instance, 0, 'click'),
       );
     });
 
@@ -483,7 +531,7 @@ describe('Menu', () => {
       const onOpenChange = jest.fn();
       const onEnterEnd = jest.spyOn(cloneMotion, 'onEnterEnd');
 
-      const wrapper = mount(
+      const { container } = render(
         <Menu mode="inline" motion={cloneMotion} onOpenChange={onOpenChange}>
           <SubMenu key="1" title="submenu1">
             <Menu.Item key="submenu1">Option 1</Menu.Item>
@@ -493,90 +541,105 @@ describe('Menu', () => {
         </Menu>,
       );
 
-      wrapper.find('div.ant-menu-submenu-title').simulate('click');
+      fireEvent.click(container.querySelector('.ant-menu-submenu-title'));
 
-      act(() => {
-        jest.runAllTimers();
-        wrapper.update();
-      });
+      triggerAllTimer();
 
       expect(onOpenChange).toHaveBeenCalled();
       expect(onEnterEnd).toHaveBeenCalledTimes(1);
     });
 
     it('vertical with hover(default)', () => {
-      const wrapper = mount(
-        <Menu mode="vertical">
+      const defaultProps = { mode: 'vertical' };
+
+      const Demo = () => (
+        <Menu {...defaultProps}>
           <SubMenu key="1" title="submenu1">
             <Menu.Item key="submenu1">Option 1</Menu.Item>
             <Menu.Item key="submenu2">Option 2</Menu.Item>
           </SubMenu>
           <Menu.Item key="2">menu2</Menu.Item>
-        </Menu>,
+        </Menu>
       );
+
+      const instance = render(<Demo />);
+
       expectSubMenuBehavior(
-        wrapper,
-        () => toggleMenu(wrapper, 0, 'mouseenter'),
-        () => toggleMenu(wrapper, 0, 'mouseleave'),
+        defaultProps,
+        instance,
+        () => toggleMenu(instance, 0, 'mouseEnter'),
+        () => toggleMenu(instance, 0, 'mouseLeave'),
       );
     });
 
     it('vertical with click', () => {
-      const wrapper = mount(
-        <Menu mode="vertical" triggerSubMenuAction="click">
+      const defaultProps = { mode: 'vertical', triggerSubMenuAction: 'click' };
+      const Demo = () => (
+        <Menu {...defaultProps}>
           <SubMenu key="1" title="submenu1">
             <Menu.Item key="submenu1">Option 1</Menu.Item>
             <Menu.Item key="submenu2">Option 2</Menu.Item>
           </SubMenu>
           <Menu.Item key="2">menu2</Menu.Item>
-        </Menu>,
+        </Menu>
       );
+
+      const instance = render(<Demo />);
+
       expectSubMenuBehavior(
-        wrapper,
-        () => toggleMenu(wrapper, 0, 'click'),
-        () => toggleMenu(wrapper, 0, 'click'),
+        defaultProps,
+        instance,
+        () => toggleMenu(instance, 0, 'click'),
+        () => toggleMenu(instance, 0, 'click'),
       );
     });
 
     it('horizontal with hover(default)', () => {
-      jest.useFakeTimers();
-      const wrapper = mount(
-        <Menu mode="horizontal">
+      const defaultProps = { mode: 'horizontal' };
+      const Demo = () => (
+        <Menu {...defaultProps}>
           <SubMenu key="1" title="submenu1">
             <Menu.Item key="submenu1">Option 1</Menu.Item>
             <Menu.Item key="submenu2">Option 2</Menu.Item>
           </SubMenu>
           <Menu.Item key="2">menu2</Menu.Item>
-        </Menu>,
+        </Menu>
       );
+
+      const instance = render(<Demo />);
+
       expectSubMenuBehavior(
-        wrapper,
-        () => toggleMenu(wrapper, 0, 'mouseenter'),
-        () => toggleMenu(wrapper, 0, 'mouseleave'),
+        defaultProps,
+        instance,
+        () => toggleMenu(instance, 0, 'mouseEnter'),
+        () => toggleMenu(instance, 0, 'mouseLeave'),
       );
     });
 
     it('horizontal with click', () => {
-      jest.useFakeTimers();
-      const wrapper = mount(
-        <Menu mode="horizontal" triggerSubMenuAction="click">
+      const defaultProps = { mode: 'horizontal', triggerSubMenuAction: 'click' };
+      const Demo = () => (
+        <Menu {...defaultProps}>
           <SubMenu key="1" title="submenu1">
             <Menu.Item key="submenu1">Option 1</Menu.Item>
             <Menu.Item key="submenu2">Option 2</Menu.Item>
           </SubMenu>
           <Menu.Item key="2">menu2</Menu.Item>
-        </Menu>,
+        </Menu>
       );
+
+      const instance = render(<Demo />);
+
       expectSubMenuBehavior(
-        wrapper,
-        () => toggleMenu(wrapper, 0, 'click'),
-        () => toggleMenu(wrapper, 0, 'click'),
+        defaultProps,
+        instance,
+        () => toggleMenu(instance, 0, 'click'),
+        () => toggleMenu(instance, 0, 'click'),
       );
     });
   });
 
   it('inline title', () => {
-    jest.useFakeTimers();
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed>
         <Menu.Item key="1" title="bamboo lucky" icon={<PieChartOutlined />}>
@@ -591,15 +654,11 @@ describe('Menu', () => {
     );
 
     wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
-    act(() => {
-      jest.runAllTimers();
-    });
+    triggerAllTimer();
     wrapper.update();
 
     const text = wrapper.find('.ant-tooltip-inner').text();
     expect(text).toBe('bamboo lucky');
-
-    jest.useRealTimers();
   });
 
   it('render correctly when using with Layout.Sider', () => {
@@ -632,9 +691,7 @@ describe('Menu', () => {
     expect(wrapper.find(Menu).at(0).getDOMNode().classList.contains('ant-menu-inline')).toBe(true);
     wrapper.find('.ant-menu-submenu-title').simulate('click');
     wrapper.find('.ant-layout-sider-trigger').simulate('click');
-    act(() => {
-      jest.runAllTimers();
-    });
+    triggerAllTimer();
     wrapper.update();
     expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-inline-collapsed')).toBe(
       true,
@@ -735,7 +792,7 @@ describe('Menu', () => {
 
     const onOpen = jest.fn();
     const onClose = jest.fn();
-    mount(
+    render(
       <Menu defaultOpenKeys={['1']} mode="inline" onOpen={onOpen} onClose={onClose}>
         <SubMenu key="1" title="submenu1">
           <Menu.Item key="submenu1">Option 1</Menu.Item>
@@ -883,4 +940,16 @@ describe('Menu', () => {
     );
     expect(ref.current?.menu?.list).toBe(wrapper.find('ul').first().getDOMNode());
   });
+
+  it('expandIcon', () => {
+    const wrapper = mount(
+      <Menu defaultOpenKeys={['1']} mode="inline" expandIcon={() => <span className="bamboo" />}>
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+        </SubMenu>
+      </Menu>,
+    );
+
+    expect(wrapper.exists('.bamboo')).toBeTruthy();
+  });
 });
diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md
index 1f494fd84f..8c6bfb092f 100755
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -85,5 +85,5 @@ const App = () => {
   return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md
index 01c20505ef..e6c730f330 100644
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@@ -91,5 +91,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/menu/demo/inline.md b/components/menu/demo/inline.md
index 5e0be6df0a..fbb1fdc35a 100755
--- a/components/menu/demo/inline.md
+++ b/components/menu/demo/inline.md
@@ -72,5 +72,5 @@ const Sider = () => {
   );
 };
 
-ReactDOM.render(<Sider />, mountNode);
+export default () => <Sider />;
 ```
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 0cadaac806..5bd2132ed0 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -81,5 +81,5 @@ const Sider = () => {
   );
 };
 
-ReactDOM.render(<Sider />, mountNode);
+export default () => <Sider />;
 ```
diff --git a/components/menu/demo/style-debug.md b/components/menu/demo/style-debug.md
index e36ee568dc..5207e6aaf9 100644
--- a/components/menu/demo/style-debug.md
+++ b/components/menu/demo/style-debug.md
@@ -106,5 +106,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/menu/demo/submenu-theme.md b/components/menu/demo/submenu-theme.md
index 4f517288c5..abffac8f7f 100755
--- a/components/menu/demo/submenu-theme.md
+++ b/components/menu/demo/submenu-theme.md
@@ -82,5 +82,5 @@ const SubMenuTheme = () => {
   );
 };
 
-ReactDOM.render(<SubMenuTheme />, mountNode);
+export default () => <SubMenuTheme />;
 ```
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index c1bec48f23..b0ad674b00 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -93,5 +93,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md
index 7bab0c37f4..838ba63673 100755
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -93,5 +93,5 @@ const Sider = () => {
   );
 };
 
-ReactDOM.render(<Sider />, mountNode);
+export default () => <Sider />;
 ```
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index b9c126e516..a81b4e5bf5 100755
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -59,8 +59,7 @@ const onClick: MenuProps['onClick'] = e => {
   console.log('click', e);
 };
 
-ReactDOM.render(
-  <Menu onClick={onClick} style={{ width: 256 }} mode="vertical" items={items} />,
-  mountNode,
+export default () => (
+  <Menu onClick={onClick} style={{ width: 256 }} mode="vertical" items={items} />
 );
 ```
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index e8567bae42..aeea2de8b7 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -127,9 +127,13 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
         prefixCls={prefixCls}
         direction={direction}
         defaultMotions={defaultMotions}
-        expandIcon={cloneElement(expandIcon, {
-          className: `${prefixCls}-submenu-expand-icon`,
-        })}
+        expandIcon={
+          typeof expandIcon === 'function'
+            ? expandIcon
+            : cloneElement(expandIcon, {
+                className: `${prefixCls}-submenu-expand-icon`,
+              })
+        }
         ref={ref}
       >
         {mergedChildren}
diff --git a/components/message/demo/custom-style.md b/components/message/demo/custom-style.md
index bad494d5fe..4fc0b21399 100644
--- a/components/message/demo/custom-style.md
+++ b/components/message/demo/custom-style.md
@@ -26,5 +26,5 @@ const success = () => {
   });
 };
 
-ReactDOM.render(<Button onClick={success}>Customized style</Button>, mountNode);
+export default () => <Button onClick={success}>Customized style</Button>;
 ```
diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md
index b87691b627..4078ab5b39 100644
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@@ -20,5 +20,5 @@ const success = () => {
   message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
 };
 
-ReactDOM.render(<Button onClick={success}>Customized display duration</Button>, mountNode);
+export default () => <Button onClick={success}>Customized display duration</Button>;
 ```
diff --git a/components/message/demo/hooks.md b/components/message/demo/hooks.md
index 166ba2932a..8d6d46b546 100644
--- a/components/message/demo/hooks.md
+++ b/components/message/demo/hooks.md
@@ -38,5 +38,5 @@ function Demo() {
   );
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
index 63a7da8333..cc53aa7e8b 100644
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -20,10 +20,9 @@ const info = () => {
   message.info('This is a normal message');
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={info}>
     Display normal message
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
index 749c500bbb..23e2c0276a 100644
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -22,5 +22,5 @@ const success = () => {
   setTimeout(hide, 2500);
 };
 
-ReactDOM.render(<Button onClick={success}>Display a loading indicator</Button>, mountNode);
+export default () => <Button onClick={success}>Display a loading indicator</Button>;
 ```
diff --git a/components/message/demo/other.md b/components/message/demo/other.md
index 94717ac41e..12f15d9408 100644
--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@@ -28,12 +28,11 @@ const warning = () => {
   message.warning('This is a warning message');
 };
 
-ReactDOM.render(
+export default () => (
   <Space>
     <Button onClick={success}>Success</Button>
     <Button onClick={error}>Error</Button>
     <Button onClick={warning}>Warning</Button>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/message/demo/thenable.md b/components/message/demo/thenable.md
index 0d8ec20034..affb3064c5 100644
--- a/components/message/demo/thenable.md
+++ b/components/message/demo/thenable.md
@@ -23,5 +23,5 @@ const success = () => {
     .then(() => message.info('Loading finished is finished', 2.5));
 };
 
-ReactDOM.render(<Button onClick={success}>Display sequential messages</Button>, mountNode);
+export default () => <Button onClick={success}>Display sequential messages</Button>;
 ```
diff --git a/components/message/demo/update.md b/components/message/demo/update.md
index a6b40f581c..8d65ab9fb4 100644
--- a/components/message/demo/update.md
+++ b/components/message/demo/update.md
@@ -25,10 +25,9 @@ const openMessage = () => {
   }, 1000);
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openMessage}>
     Open the message box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/message/index.tsx b/components/message/index.tsx
index 9f19058c4a..9cbc3360c2 100755
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@@ -132,9 +132,9 @@ export type NoticeType = keyof typeof typeToIcon;
 export const typeList = Object.keys(typeToIcon) as NoticeType[];
 
 export interface ArgsProps {
-  content: React.ReactNode;
+  content: any;
   duration?: number;
-  type: NoticeType;
+  type?: NoticeType;
   prefixCls?: string;
   rootPrefixCls?: string;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
@@ -152,7 +152,7 @@ function getRCNoticeProps(
   iconPrefixCls?: string,
 ): NoticeContent {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
-  const IconComponent = typeToIcon[args.type];
+  const IconComponent = typeToIcon[args.type!];
   const messageClass = classNames(`${prefixCls}-custom-content`, {
     [`${prefixCls}-${args.type}`]: args.type,
     [`${prefixCls}-rtl`]: rtl === true,
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index dba62ae8ec..ecd09f383e 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -81,6 +81,7 @@ export interface ModalProps {
   closeIcon?: React.ReactNode;
   modalRender?: (node: React.ReactNode) => React.ReactNode;
   focusTriggerAfterClose?: boolean;
+  children?: React.ReactNode;
 }
 
 type getContainerFunc = () => HTMLElement;
diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
index f3ce73d0a5..3581c80a1f 100644
--- a/components/modal/__tests__/confirm.test.js
+++ b/components/modal/__tests__/confirm.test.js
@@ -10,6 +10,8 @@ import destroyFns from '../destroyFns';
 import { sleep } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 const { confirm } = Modal;
 
 jest.mock('rc-motion');
@@ -21,13 +23,23 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     CSSMotion[key] = MockCSSMotion[key];
   });
 
-  // Mock for rc-util raf
-  window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
-  window.cancelAnimationFrame = id => {
-    window.clearTimeout(id);
-  };
+  // // Mock for rc-util raf
+  // window.requestAnimationFrame = callback => {
+  //   const ret = window.setTimeout(callback, 16);
+  //   return ret;
+  // };
+  // window.cancelAnimationFrame = id => {
+  //   window.clearTimeout(id);
+  // };
 
-  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  // jest.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+  //   const id = window.setTimeout(callback);
+  //   console.log('Mock Raf:', id);
+  //   return id;
+  // });
+  // jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => window.clearTimeout(id));
+
+  const errorSpy = jest.spyOn(console, 'error');
 
   /* eslint-disable no-console */
   // Hack error to remove act warning
@@ -42,10 +54,13 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   };
   /* eslint-enable */
 
-  afterEach(() => {
+  afterEach(async () => {
+    jest.clearAllTimers();
     errorSpy.mockReset();
-    document.body.innerHTML = '';
     Modal.destroyAll();
+
+    await sleep();
+    document.body.innerHTML = '';
   });
 
   afterAll(() => {
@@ -77,69 +92,88 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('trigger onCancel once when click on cancel button', () => {
+  it('trigger onCancel once when click on cancel button', async () => {
     const onCancel = jest.fn();
     const onOk = jest.fn();
     open({
       onCancel,
       onOk,
     });
+
     // first Modal
+    await sleep();
     $$('.ant-btn')[0].click();
     expect(onCancel.mock.calls.length).toBe(1);
     expect(onOk.mock.calls.length).toBe(0);
   });
 
-  it('trigger onOk once when click on ok button', () => {
+  it('trigger onOk once when click on ok button', async () => {
     const onCancel = jest.fn();
     const onOk = jest.fn();
     open({
       onCancel,
       onOk,
     });
+
     // second Modal
+    await sleep();
     $$('.ant-btn-primary')[0].click();
     expect(onCancel.mock.calls.length).toBe(0);
     expect(onOk.mock.calls.length).toBe(1);
   });
 
-  it('should allow Modal.confirm without onCancel been set', () => {
+  it('should allow Modal.confirm without onCancel been set', async () => {
     open();
+    await sleep();
+
     // Third Modal
     $$('.ant-btn')[0].click();
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
-  it('should allow Modal.confirm without onOk been set', () => {
+  it('should allow Modal.confirm without onOk been set', async () => {
     open();
+
     // Fourth Modal
+    await sleep();
     $$('.ant-btn-primary')[0].click();
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
-  it('should close confirm modal when press ESC', () => {
+  it('should close confirm modal when press ESC', async () => {
     jest.useFakeTimers();
+    jest.clearAllTimers();
     const onCancel = jest.fn();
     Modal.confirm({
       title: 'title',
       content: 'content',
       onCancel,
     });
+
     jest.runAllTimers();
+    await sleep();
+    jest.runAllTimers();
+
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
     TestUtils.Simulate.keyDown($$('.ant-modal')[0], {
       keyCode: KeyCode.ESC,
     });
+
     jest.runAllTimers();
+    await sleep(0);
+    jest.runAllTimers();
+
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
     expect(onCancel).toHaveBeenCalledTimes(1);
     jest.useRealTimers();
   });
 
-  it('should not hide confirm when onOk return Promise.resolve', () => {
+  it('should not hide confirm when onOk return Promise.resolve', async () => {
     open({
       onOk: () => Promise.resolve(''),
     });
+
+    await sleep();
     $$('.ant-btn-primary')[0].click();
     expect($$('.ant-modal-confirm')).toHaveLength(1);
   });
@@ -149,6 +183,8 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     open({
       onOk: () => Promise.reject(error),
     });
+
+    await sleep();
     $$('.ant-btn-primary')[0].click();
 
     // wait promise
@@ -157,52 +193,72 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect(errorSpy).toHaveBeenCalledWith(error);
   });
 
-  it('shows animation when close', () => {
+  it('shows animation when close', async () => {
     open();
+
     jest.useFakeTimers();
+    jest.runAllTimers();
+    await sleep();
+    jest.runAllTimers();
+
     expect($$('.ant-modal-confirm')).toHaveLength(1);
+
+    await sleep();
     $$('.ant-btn')[0].click();
-    act(() => {
-      jest.runAllTimers();
-    });
+
+    jest.runAllTimers();
+    await sleep();
+    jest.runAllTimers();
+
     expect($$('.ant-modal-confirm')).toHaveLength(0);
     jest.useRealTimers();
   });
 
-  it('ok only', () => {
+  it('ok only', async () => {
     open({ okCancel: false });
+    await sleep();
     expect($$('.ant-btn')).toHaveLength(1);
     expect($$('.ant-btn')[0].innerHTML).toContain('OK');
   });
 
-  it('allows extra props on buttons', () => {
+  it('allows extra props on buttons', async () => {
     open({ okButtonProps: { disabled: true }, cancelButtonProps: { 'data-test': 'baz' } });
+
+    await sleep();
     expect($$('.ant-btn')).toHaveLength(2);
     expect($$('.ant-btn')[0].attributes['data-test'].value).toBe('baz');
     expect($$('.ant-btn')[1].disabled).toBe(true);
   });
 
-  it('should close modals when click confirm button', () => {
-    jest.useFakeTimers();
+  describe('should close modals when click confirm button', () => {
     ['info', 'success', 'warning', 'error'].forEach(type => {
-      Modal[type]({
-        title: 'title',
-        content: 'content',
+      it(type, async () => {
+        jest.useFakeTimers();
+        Modal[type]({
+          title: 'title',
+          content: 'content',
+        });
+
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+          jest.runAllTimers();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+
+        $$('.ant-btn')[0].click();
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+          jest.runAllTimers();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
+        jest.useRealTimers();
       });
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      $$('.ant-btn')[0].click();
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
     });
-    jest.useRealTimers();
   });
 
-  it('should close confirm modal when click cancel button', () => {
+  it('should close confirm modal when click cancel button', async () => {
     jest.useFakeTimers();
     const onCancel = jest.fn();
     Modal.confirm({
@@ -215,15 +271,16 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     });
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
     $$('.ant-btn')[0].click();
-    act(() => {
+    await act(async () => {
       jest.runAllTimers();
+      await sleep();
     });
     expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
     expect(onCancel).toHaveBeenCalledTimes(1);
     jest.useRealTimers();
   });
 
-  it('should close confirm modal when click close button', () => {
+  it('should close confirm modal when click close button', async () => {
     jest.useFakeTimers();
     const onCancel = jest.fn();
     Modal.confirm({
@@ -238,151 +295,183 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     });
     expect($$(`.ant-modal-close`)).toHaveLength(1);
     $$('.ant-btn')[0].click();
-    act(() => {
+    await act(async () => {
       jest.runAllTimers();
+      await sleep();
     });
     expect($$(`.ant-modal-close`)).toHaveLength(0);
     expect(onCancel).toHaveBeenCalledTimes(1);
     jest.useRealTimers();
   });
 
-  it('should not close modals when click confirm button when onOk has argument', () => {
-    jest.useFakeTimers();
+  describe('should not close modals when click confirm button when onOk has argument', () => {
     ['info', 'success', 'warning', 'error'].forEach(type => {
-      Modal[type]({
-        title: 'title',
-        content: 'content',
-        onOk: close => null, // eslint-disable-line no-unused-vars
+      it(type, async () => {
+        jest.useFakeTimers();
+        Modal[type]({
+          title: 'title',
+          content: 'content',
+          onOk: close => null, // eslint-disable-line no-unused-vars
+        });
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+        $$('.ant-btn')[0].click();
+
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+        jest.useRealTimers();
       });
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      $$('.ant-btn')[0].click();
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
     });
-    jest.useRealTimers();
   });
 
-  it('could be update by new config', () => {
-    jest.useFakeTimers();
+  describe('could be update by new config', () => {
     ['info', 'success', 'warning', 'error'].forEach(type => {
-      const instance = Modal[type]({
-        title: 'title',
-        content: 'content',
-      });
-      act(() => {
+      it(type, async () => {
+        jest.useFakeTimers();
+        const instance = Modal[type]({
+          title: 'title',
+          content: 'content',
+        });
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+        expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+        expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
+        instance.update({
+          title: 'new title',
+          content: 'new content',
+        });
+
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+        expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
+        expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
+        instance.destroy();
         jest.runAllTimers();
+        jest.useRealTimers();
       });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
-      expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
-      instance.update({
-        title: 'new title',
-        content: 'new content',
-      });
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
-      expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
-      instance.destroy();
-      jest.runAllTimers();
     });
-    jest.useRealTimers();
   });
 
-  it('could be update by call function', () => {
-    jest.useFakeTimers();
+  describe('could be update by call function', () => {
     ['info', 'success', 'warning', 'error'].forEach(type => {
-      const instance = Modal[type]({
-        title: 'title',
-        okButtonProps: {
-          loading: true,
-          style: {
-            color: 'red',
+      it(type, () => {
+        jest.useFakeTimers();
+        const instance = Modal[type]({
+          title: 'title',
+          okButtonProps: {
+            loading: true,
+            style: {
+              color: 'red',
+            },
           },
-        },
-      });
-      act(() => {
+        });
+        act(() => {
+          jest.runAllTimers();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+        expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+        expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].classList).toContain(
+          'ant-btn-loading',
+        );
+        expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
+        instance.update(prevConfig => ({
+          ...prevConfig,
+          okButtonProps: {
+            ...prevConfig.okButtonProps,
+            loading: false,
+          },
+        }));
+        act(() => {
+          jest.runAllTimers();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+        expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+        expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].classList).not.toContain(
+          'ant-btn-loading',
+        );
+        expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
+        instance.destroy();
         jest.runAllTimers();
+        jest.useRealTimers();
       });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
-      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].classList).toContain(
-        'ant-btn-loading',
-      );
-      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
-      instance.update(prevConfig => ({
-        ...prevConfig,
-        okButtonProps: {
-          ...prevConfig.okButtonProps,
-          loading: false,
-        },
-      }));
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
-      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].classList).not.toContain(
-        'ant-btn-loading',
-      );
-      expect($$('.ant-modal-confirm-btns .ant-btn-primary')[0].style.color).toBe('red');
-      instance.destroy();
-      jest.runAllTimers();
     });
-    jest.useRealTimers();
   });
 
-  it('could be destroy', () => {
-    jest.useFakeTimers();
+  describe('could be destroy', () => {
     ['info', 'success', 'warning', 'error'].forEach(type => {
-      const instance = Modal[type]({
-        title: 'title',
-        content: 'content',
+      jest.useFakeTimers();
+      it(type, async () => {
+        const instance = Modal[type]({
+          title: 'title',
+          content: 'content',
+        });
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+
+        instance.destroy();
+        await act(async () => {
+          jest.runAllTimers();
+          await sleep();
+        });
+        expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
       });
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      instance.destroy();
-      act(() => {
-        jest.runAllTimers();
-      });
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
+      jest.useRealTimers();
     });
-    jest.useRealTimers();
   });
 
-  it('could be Modal.destroyAll', () => {
+  it('could be Modal.destroyAll', async () => {
     jest.useFakeTimers();
+
+    // Show
     ['info', 'success', 'warning', 'error'].forEach(type => {
       Modal[type]({
         title: 'title',
         content: 'content',
       });
-      act(() => {
-        jest.runAllTimers();
-      });
+    });
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
+    ['info', 'success', 'warning', 'error'].forEach(type => {
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
     });
+
+    // Destroy
     Modal.destroyAll();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     ['info', 'success', 'warning', 'error'].forEach(type => {
-      act(() => {
-        jest.runAllTimers();
-      });
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
     });
     jest.useRealTimers();
   });
 
-  it('prefixCls', () => {
+  it('prefixCls', async () => {
     open({ prefixCls: 'custom-modal' });
+
+    await sleep();
     expect($$('.custom-modal-mask')).toHaveLength(1);
     expect($$('.custom-modal-wrap')).toHaveLength(1);
     expect($$('.custom-modal-confirm')).toHaveLength(1);
@@ -428,20 +517,30 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('should warning when pass a string as icon props', () => {
+  it('should warning when pass a string as icon props', async () => {
     jest.useFakeTimers();
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     confirm({
       content: 'some descriptions',
       icon: 'ab',
     });
-    jest.runAllTimers();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     expect(warnSpy).not.toHaveBeenCalled();
     confirm({
       content: 'some descriptions',
       icon: 'question',
     });
-    jest.runAllTimers();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Modal] \`icon\` is using ReactNode instead of string naming in v4. Please check \`question\` at https://ant.design/components/icon`,
     );
@@ -449,16 +548,18 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('ok button should trigger onOk once when click it many times quickly', () => {
+  it('ok button should trigger onOk once when click it many times quickly', async () => {
     const onOk = jest.fn();
     open({ onOk });
+
+    await sleep();
     $$('.ant-btn-primary')[0].click();
     $$('.ant-btn-primary')[0].click();
     expect(onOk).toHaveBeenCalledTimes(1);
   });
 
   // https://github.com/ant-design/ant-design/issues/23358
-  it('ok button should trigger onOk multiple times when onOk has close argument', () => {
+  it('ok button should trigger onOk multiple times when onOk has close argument', async () => {
     const onOk = jest.fn();
     open({
       onOk: close => {
@@ -466,17 +567,24 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         (() => {})(close); // do nothing
       },
     });
+
+    await sleep();
     $$('.ant-btn-primary')[0].click();
     $$('.ant-btn-primary')[0].click();
     $$('.ant-btn-primary')[0].click();
     expect(onOk).toHaveBeenCalledTimes(3);
   });
 
-  it('should be able to global config rootPrefixCls', () => {
+  it('should be able to global config rootPrefixCls', async () => {
     jest.useFakeTimers();
     ConfigProvider.config({ prefixCls: 'my', iconPrefixCls: 'bamboo' });
     confirm({ title: 'title', icon: <SmileOutlined /> });
-    jest.runAllTimers();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     expect(document.querySelectorAll('.ant-btn').length).toBe(0);
     expect(document.querySelectorAll('.my-btn').length).toBe(2);
     expect(document.querySelectorAll('.bamboo-smile').length).toBe(1);
@@ -485,7 +593,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
-  it('should be able to config rootPrefixCls', () => {
+  it('should be able to config rootPrefixCls', async () => {
     resetWarned();
 
     jest.useFakeTimers();
@@ -500,7 +608,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     confirm({
       title: 'title',
     });
-    jest.runAllTimers();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     expect(document.querySelectorAll('.ant-btn').length).toBe(0);
     expect(document.querySelectorAll('.my-btn').length).toBe(2);
     expect(document.querySelectorAll('.my-modal-confirm').length).toBe(1);
@@ -510,7 +623,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     confirm({
       title: 'title',
     });
-    jest.runAllTimers();
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
     expect(document.querySelectorAll('.ant-btn').length).toBe(0);
     expect(document.querySelectorAll('.my-btn').length).toBe(2);
     expect(document.querySelectorAll('.my-modal-confirm').length).toBe(1);
@@ -528,6 +646,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       afterClose,
     });
     // first Modal
+    await sleep();
     $$('.ant-btn')[0].click();
     expect(afterClose).not.toHaveBeenCalled();
     await sleep(500);
@@ -539,7 +658,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     open({
       afterClose,
     });
+
     // second Modal
+    await sleep();
     $$('.ant-btn-primary')[0].click();
     expect(afterClose).not.toHaveBeenCalled();
     await sleep(500);
@@ -548,6 +669,8 @@ describe('Modal.confirm triggers callbacks correctly', () => {
 
   it('bodyStyle', async () => {
     open({ bodyStyle: { width: 500 } });
+
+    await sleep();
     const { width } = $$('.ant-modal-body')[0].style;
     expect(width).toBe('500px');
   });
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
index f83d7c1601..a7b3e2a24d 100644
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { render as reactRender, unmount as reactUnmount } from 'rc-util/lib/React/render';
 import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
 import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
 import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
@@ -32,7 +32,6 @@ export default function confirm(config: ModalFuncProps) {
   let currentConfig = { ...config, close, visible: true } as any;
 
   function destroy(...args: any[]) {
-    ReactDOM.unmountComponentAtNode(container);
     const triggerCancel = args.some(param => param && param.triggerCancel);
     if (config.onCancel && triggerCancel) {
       config.onCancel(...args);
@@ -45,6 +44,8 @@ export default function confirm(config: ModalFuncProps) {
         break;
       }
     }
+
+    reactUnmount(container);
   }
 
   function render({ okText, cancelText, prefixCls: customizePrefixCls, ...props }: any) {
@@ -61,7 +62,7 @@ export default function confirm(config: ModalFuncProps) {
       const prefixCls = customizePrefixCls || `${rootPrefixCls}-modal`;
       const iconPrefixCls = getIconPrefixCls();
 
-      ReactDOM.render(
+      reactRender(
         <ConfirmDialog
           {...props}
           prefixCls={prefixCls}
@@ -83,6 +84,7 @@ export default function confirm(config: ModalFuncProps) {
         if (typeof config.afterClose === 'function') {
           config.afterClose();
         }
+
         destroy.apply(this, args);
       },
     };
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index a650c47c19..b2182906fe 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -57,5 +57,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 2f1a0b5fe3..691d2f5780 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -46,5 +46,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index aa5be2605f..15a3227e35 100644
--- a/components/modal/demo/button-props.md
+++ b/components/modal/demo/button-props.md
@@ -62,5 +62,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/confirm-router.md b/components/modal/demo/confirm-router.md
index 27c3fbde80..460e581629 100644
--- a/components/modal/demo/confirm-router.md
+++ b/components/modal/demo/confirm-router.md
@@ -40,5 +40,5 @@ function showConfirm() {
   }
 }
 
-ReactDOM.render(<Button onClick={showConfirm}>Confirm</Button>, mountNode);
+export default () => <Button onClick={showConfirm}>Confirm</Button>;
 ```
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index 9261b9734b..150e1387bd 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -84,7 +84,7 @@ function showPropsConfirm() {
   });
 }
 
-ReactDOM.render(
+export default () => (
   <Space wrap>
     <Button onClick={showConfirm}>Confirm</Button>
     <Button onClick={showPromiseConfirm}>With promise</Button>
@@ -94,7 +94,6 @@ ReactDOM.render(
     <Button onClick={showPropsConfirm} type="dashed">
       With extra props
     </Button>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/modal/demo/dark.md b/components/modal/demo/dark.md
index f504857274..e17e1b8eff 100644
--- a/components/modal/demo/dark.md
+++ b/components/modal/demo/dark.md
@@ -592,7 +592,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 <style>
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index c39560ebda..94d9977d2e 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -84,5 +84,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/hooks.md b/components/modal/demo/hooks.md
index 7b8d4246f4..fa7510f2e7 100644
--- a/components/modal/demo/hooks.md
+++ b/components/modal/demo/hooks.md
@@ -74,5 +74,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
index 03d94e28d4..ede9a2f0dc 100644
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -49,13 +49,12 @@ function warning() {
   });
 }
 
-ReactDOM.render(
+export default () => (
   <Space wrap>
     <Button onClick={info}>Info</Button>
     <Button onClick={success}>Success</Button>
     <Button onClick={error}>Error</Button>
     <Button onClick={warning}>Warning</Button>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index 1bf17c1e63..b3da332683 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -65,11 +65,10 @@ function confirm() {
   });
 }
 
-ReactDOM.render(
+export default () => (
   <Space>
     <LocalizedModal />
     <Button onClick={confirm}>Confirm</Button>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index 31ee4e9d1b..0b7f0e6860 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -34,5 +34,5 @@ function countDown() {
   }, secondsToGo * 1000);
 }
 
-ReactDOM.render(<Button onClick={countDown}>Open modal to close in 5s</Button>, mountNode);
+export default () => <Button onClick={countDown}>Open modal to close in 5s</Button>;
 ```
diff --git a/components/modal/demo/modal-render.md b/components/modal/demo/modal-render.md
index 8a5ef97571..9340a2a633 100644
--- a/components/modal/demo/modal-render.md
+++ b/components/modal/demo/modal-render.md
@@ -120,5 +120,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index 1afbc0ead2..db286a39bf 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -68,5 +68,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/modal/demo/width.md b/components/modal/demo/width.md
index 62d82ea713..bc71582bdc 100644
--- a/components/modal/demo/width.md
+++ b/components/modal/demo/width.md
@@ -40,5 +40,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index 8adab297c2..d1a424616c 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -27,10 +27,9 @@ const openNotification = () => {
   });
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md
index b49b9d041d..389aca236c 100644
--- a/components/notification/demo/custom-icon.md
+++ b/components/notification/demo/custom-icon.md
@@ -26,10 +26,9 @@ const openNotification = () => {
   });
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/notification/demo/custom-style.md b/components/notification/demo/custom-style.md
index fc41364d82..84b15019b0 100644
--- a/components/notification/demo/custom-style.md
+++ b/components/notification/demo/custom-style.md
@@ -28,10 +28,9 @@ const openNotification = () => {
   });
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index 5e9d4cc8cf..8da6bca4fa 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -26,10 +26,9 @@ const openNotification = () => {
   notification.open(args);
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/notification/demo/hooks.md b/components/notification/demo/hooks.md
index a7663e15d8..c32e6a88fa 100755
--- a/components/notification/demo/hooks.md
+++ b/components/notification/demo/hooks.md
@@ -63,5 +63,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 874366e943..4218d320c7 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -33,7 +33,7 @@ const openNotification = placement => {
   });
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <Space>
       <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
@@ -81,7 +81,6 @@ ReactDOM.render(
         bottomRight
       </Button>
     </Space>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/notification/demo/update.md b/components/notification/demo/update.md
index 102addfc8a..2fca4e0362 100644
--- a/components/notification/demo/update.md
+++ b/components/notification/demo/update.md
@@ -33,10 +33,9 @@ const openNotification = () => {
   }, 1000);
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index 121070f2c7..cfea71e3c9 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -39,10 +39,9 @@ const openNotification = () => {
   });
 };
 
-ReactDOM.render(
+export default () => (
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>,
-  mountNode,
+  </Button>
 );
 ```
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index 38be252d57..7f4e0d263f 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -24,13 +24,12 @@ const openNotificationWithIcon = type => {
   });
 };
 
-ReactDOM.render(
+export default () => (
   <Space>
     <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
     <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
     <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
     <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md
index 60d77a853f..f062590967 100644
--- a/components/page-header/demo/actions.md
+++ b/components/page-header/demo/actions.md
@@ -16,7 +16,7 @@ Use the operating area and customize the sub-nodes, suitable for use in the need
 ```jsx
 import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <PageHeader
       className="site-page-header"
@@ -70,8 +70,7 @@ ReactDOM.render(
         <Statistic title="Balance" prefix="$" value={3345.08} />
       </Row>
     </PageHeader>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/page-header/demo/basic.md b/components/page-header/demo/basic.md
index 904fccbf58..aaed6d5add 100644
--- a/components/page-header/demo/basic.md
+++ b/components/page-header/demo/basic.md
@@ -16,14 +16,13 @@ Standard header, suitable for use in scenarios that require a brief description.
 ```jsx
 import { PageHeader } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <PageHeader
     className="site-page-header"
     onBack={() => null}
     title="Title"
     subTitle="This is a subtitle"
-  />,
-  mountNode,
+  />
 );
 ```
 
diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md
index 9410f40644..3f7ef90802 100644
--- a/components/page-header/demo/breadcrumb.md
+++ b/components/page-header/demo/breadcrumb.md
@@ -31,13 +31,12 @@ const routes = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <PageHeader
     className="site-page-header"
     title="Title"
     breadcrumb={{ routes }}
     subTitle="This is a subtitle"
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md
index 688c8ee8ac..b8433d7fd3 100644
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@@ -110,7 +110,7 @@ const Content = ({ children, extraContent }) => (
   </Row>
 );
 
-ReactDOM.render(
+export default () => (
   <PageHeader
     title="Title"
     className="site-page-header"
@@ -138,8 +138,7 @@ ReactDOM.render(
     >
       {content}
     </Content>
-  </PageHeader>,
-  mountNode,
+  </PageHeader>
 );
 ```
 
diff --git a/components/page-header/demo/ghost.md b/components/page-header/demo/ghost.md
index 3c2eb7fab0..e364caf87c 100644
--- a/components/page-header/demo/ghost.md
+++ b/components/page-header/demo/ghost.md
@@ -16,7 +16,7 @@ The default PageHeader is a transparent background. In some cases, PageHeader ne
 ```jsx
 import { PageHeader, Button, Descriptions } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div className="site-page-header-ghost-wrapper">
     <PageHeader
       ghost={false}
@@ -43,8 +43,7 @@ ReactDOM.render(
         </Descriptions.Item>
       </Descriptions>
     </PageHeader>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/page-header/demo/responsive.md b/components/page-header/demo/responsive.md
index 3965df2a3c..88d4983677 100644
--- a/components/page-header/demo/responsive.md
+++ b/components/page-header/demo/responsive.md
@@ -59,7 +59,7 @@ const Content = ({ children, extra }) => (
   </div>
 );
 
-ReactDOM.render(
+export default () => (
   <PageHeader
     className="site-page-header-responsive"
     onBack={() => window.history.back()}
@@ -80,8 +80,7 @@ ReactDOM.render(
     }
   >
     <Content extra={extraContent}>{renderContent()}</Content>
-  </PageHeader>,
-  mountNode,
+  </PageHeader>
 );
 ```
 
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index b939003567..7545e7e219 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -27,6 +27,7 @@ export interface PageHeaderProps {
   onBack?: (e?: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
   ghost?: boolean;
+  children?: React.ReactNode;
 }
 
 const renderBack = (
diff --git a/components/pagination/demo/all.md b/components/pagination/demo/all.md
index 5fd4165416..54647d3575 100644
--- a/components/pagination/demo/all.md
+++ b/components/pagination/demo/all.md
@@ -16,13 +16,12 @@ Show all configured prop.
 ```jsx
 import { Pagination } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Pagination
     total={85}
     showSizeChanger
     showQuickJumper
     showTotal={total => `Total ${total} items`}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md
index 823962f244..2493db08ac 100644
--- a/components/pagination/demo/basic.md
+++ b/components/pagination/demo/basic.md
@@ -16,5 +16,5 @@ Basic pagination.
 ```jsx
 import { Pagination } from 'antd';
 
-ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, mountNode);
+export default () => <Pagination defaultCurrent={1} total={50} />;
 ```
diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md
index bcf4842db6..708aa3d5cb 100644
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@@ -20,7 +20,7 @@ function onShowSizeChange(current, pageSize) {
   console.log(current, pageSize);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Pagination
       showSizeChanger
@@ -36,7 +36,6 @@ ReactDOM.render(
       total={500}
       disabled
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md
index 4131d48628..c571d63704 100644
--- a/components/pagination/demo/controlled.md
+++ b/components/pagination/demo/controlled.md
@@ -33,5 +33,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/pagination/demo/itemRender.md b/components/pagination/demo/itemRender.md
index a396a8f993..bc6dc5eb57 100644
--- a/components/pagination/demo/itemRender.md
+++ b/components/pagination/demo/itemRender.md
@@ -26,5 +26,5 @@ function itemRender(current, type, originalElement) {
   return originalElement;
 }
 
-ReactDOM.render(<Pagination total={500} itemRender={itemRender} />, mountNode);
+export default () => <Pagination total={500} itemRender={itemRender} />;
 ```
diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md
index acbaf5e278..4df55a73fc 100644
--- a/components/pagination/demo/jump.md
+++ b/components/pagination/demo/jump.md
@@ -20,12 +20,11 @@ function onChange(pageNumber) {
   console.log('Page: ', pageNumber);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
     <br />
     <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
index c4c785d4de..7bc18ee7f3 100644
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@@ -20,7 +20,7 @@ function showTotal(total) {
   return `Total ${total} items`;
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Pagination size="small" total={50} />
     <Pagination size="small" total={50} showSizeChanger showQuickJumper />
@@ -33,8 +33,7 @@ ReactDOM.render(
       showSizeChanger
       showQuickJumper
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md
index 9cbdad2298..c57e9a13e0 100644
--- a/components/pagination/demo/more.md
+++ b/components/pagination/demo/more.md
@@ -16,5 +16,5 @@ More pages.
 ```jsx
 import { Pagination } from 'antd';
 
-ReactDOM.render(<Pagination defaultCurrent={6} total={500} />, mountNode);
+export default () => <Pagination defaultCurrent={6} total={500} />;
 ```
diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md
index 91829496c6..cf094d5e19 100644
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@@ -16,12 +16,11 @@ Simple mode.
 ```jsx
 import { Pagination } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Pagination simple defaultCurrent={2} total={50} />
     <br />
     <Pagination disabled simple defaultCurrent={2} total={50} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md
index a311539a7c..efaac61727 100644
--- a/components/pagination/demo/total.md
+++ b/components/pagination/demo/total.md
@@ -16,7 +16,7 @@ You can show the total number of data by setting `showTotal`.
 ```jsx
 import { Pagination } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Pagination
       total={85}
@@ -31,7 +31,6 @@ ReactDOM.render(
       defaultPageSize={20}
       defaultCurrent={1}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/popconfirm/__tests__/index.test.js b/components/popconfirm/__tests__/index.test.js
index f704e74310..9d58b1dd35 100644
--- a/components/popconfirm/__tests__/index.test.js
+++ b/components/popconfirm/__tests__/index.test.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Popconfirm from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import { sleep } from '../../../tests/utils';
@@ -251,18 +253,19 @@ describe('Popconfirm', () => {
       return <Button>Unmounted</Button>;
     };
 
-    const wrapper = mount(
+    const { container } = render(
       <div>
         <Test />
       </div>,
     );
 
-    expect(wrapper.text()).toEqual('Test');
-    const triggerNode = wrapper.find('.clickTarget').at(0);
-    triggerNode.simulate('click');
-    wrapper.find('.ant-btn-primary').simulate('click');
+    expect(container.textContent).toEqual('Test');
+
+    fireEvent.click(container.querySelector('.clickTarget'));
+    fireEvent.click(container.querySelector('.ant-btn-primary'));
+
     await sleep(500);
-    expect(wrapper.text()).toEqual('Unmounted');
+    expect(container.textContent).toEqual('Unmounted');
     expect(error).not.toHaveBeenCalled();
   });
 });
diff --git a/components/popconfirm/demo/async.md b/components/popconfirm/demo/async.md
index 823417f97c..b4e9c06b56 100644
--- a/components/popconfirm/demo/async.md
+++ b/components/popconfirm/demo/async.md
@@ -52,5 +52,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
index 0d189e1c7d..c13add1a50 100755
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -26,7 +26,7 @@ function cancel(e) {
   message.error('Click on No');
 }
 
-ReactDOM.render(
+export default () => (
   <Popconfirm
     title="Are you sure to delete this task?"
     onConfirm={confirm}
@@ -35,7 +35,6 @@ ReactDOM.render(
     cancelText="No"
   >
     <a href="#">Delete</a>
-  </Popconfirm>,
-  mountNode,
+  </Popconfirm>
 );
 ```
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index 2f2efed675..571e5f2f78 100755
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -73,5 +73,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/popconfirm/demo/icon.md b/components/popconfirm/demo/icon.md
index ce44eed6db..acceea442d 100644
--- a/components/popconfirm/demo/icon.md
+++ b/components/popconfirm/demo/icon.md
@@ -17,10 +17,9 @@ Set `icon` props to customize the icon.
 import { Popconfirm } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Popconfirm title="Are you sure？" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
     <a href="#">Delete</a>
-  </Popconfirm>,
-  mountNode,
+  </Popconfirm>
 );
 ```
diff --git a/components/popconfirm/demo/locale.md b/components/popconfirm/demo/locale.md
index 5c7f4d5128..41f2ebc0fa 100755
--- a/components/popconfirm/demo/locale.md
+++ b/components/popconfirm/demo/locale.md
@@ -16,10 +16,9 @@ Set `okText` and `cancelText` props to customize the button's labels.
 ```jsx
 import { Popconfirm } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
     <a href="#">Delete</a>
-  </Popconfirm>,
-  mountNode,
+  </Popconfirm>
 );
 ```
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index 3aa64a42d1..045807e67e 100755
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -22,7 +22,7 @@ function confirm() {
   message.info('Clicked on Yes.');
 }
 
-ReactDOM.render(
+export default () => (
   <div className="demo">
     <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
       <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
@@ -104,8 +104,7 @@ ReactDOM.render(
         <Button>BR</Button>
       </Popconfirm>
     </div>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/popconfirm/demo/promise.md b/components/popconfirm/demo/promise.md
index 9d6ce79d1d..a67a254cba 100644
--- a/components/popconfirm/demo/promise.md
+++ b/components/popconfirm/demo/promise.md
@@ -34,5 +34,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/popover/__tests__/__snapshots__/index.test.js.snap b/components/popover/__tests__/__snapshots__/index.test.js.snap
index 33309db41b..cf97f1a261 100644
--- a/components/popover/__tests__/__snapshots__/index.test.js.snap
+++ b/components/popover/__tests__/__snapshots__/index.test.js.snap
@@ -9,8 +9,8 @@ Array [
   </span>,
   <div>
     <div
-      class="ant-popover ant-popover-rtl"
-      style="opacity:0;pointer-events:none"
+      class="ant-popover ant-popover-rtl ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
+      style="opacity: 0; pointer-events: none;"
     >
       <div
         class="ant-popover-content"
diff --git a/components/popover/__tests__/index.test.js b/components/popover/__tests__/index.test.js
index 9cc1a0e8e3..fd9ac7bdd0 100644
--- a/components/popover/__tests__/index.test.js
+++ b/components/popover/__tests__/index.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Popover from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import ConfigProvider from '../../config-provider';
@@ -76,13 +78,13 @@ describe('Popover', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const overlay = jest.fn();
-    mount(
+    render(
       <Popover content="console.log('hello world')" title="code" trigger="click">
         <span>show me your code</span>
       </Popover>,
     );
 
-    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(errorSpy).not.toHaveBeenCalled();
     expect(overlay).not.toHaveBeenCalled();
   });
 
@@ -94,6 +96,6 @@ describe('Popover', () => {
         </Popover>
       </ConfigProvider>,
     );
-    expect(render(wrapper)).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });
diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md
index 8cbb8534fa..9ca19e0fe3 100644
--- a/components/popover/demo/arrow-point-at-center.md
+++ b/components/popover/demo/arrow-point-at-center.md
@@ -23,7 +23,7 @@ const content = (
   </>
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <Popover placement="topLeft" title="Title" content={content}>
       <Button>Align edge / 边缘对齐</Button>
@@ -31,7 +31,6 @@ ReactDOM.render(
     <Popover placement="topLeft" title="Title" content={content} arrowPointAtCenter>
       <Button>Arrow points to center / 箭头指向中心</Button>
     </Popover>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md
index d96fb9afb0..f4b9864c0b 100755
--- a/components/popover/demo/basic.md
+++ b/components/popover/demo/basic.md
@@ -23,11 +23,10 @@ const content = (
   </div>
 );
 
-ReactDOM.render(
+export default () => (
   <Popover content={content} title="Title">
     <Button type="primary">Hover me</Button>
-  </Popover>,
-  mountNode,
+  </Popover>
 );
 ```
 
diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md
index d79ebae93f..7621ce2404 100755
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@@ -46,5 +46,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/popover/demo/hover-with-click.md b/components/popover/demo/hover-with-click.md
index 3cd087c809..513e19179b 100644
--- a/components/popover/demo/hover-with-click.md
+++ b/components/popover/demo/hover-with-click.md
@@ -74,5 +74,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index 1e346d2311..e46ba06e2d 100755
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -26,7 +26,7 @@ const content = (
 
 const buttonWidth = 70;
 
-ReactDOM.render(
+export default () => (
   <div className="demo">
     <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
       <Popover placement="topLeft" title={text} content={content} trigger="click">
@@ -72,8 +72,7 @@ ReactDOM.render(
         <Button>BR</Button>
       </Popover>
     </div>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md
index 222c2165bc..7789a569eb 100755
--- a/components/popover/demo/triggerType.md
+++ b/components/popover/demo/triggerType.md
@@ -23,7 +23,7 @@ const content = (
   </div>
 );
 
-ReactDOM.render(
+export default () => (
   <div>
     <Popover content={content} title="Title" trigger="hover">
       <Button>Hover me</Button>
@@ -34,7 +34,6 @@ ReactDOM.render(
     <Popover content={content} title="Title" trigger="click">
       <Button>Click me</Button>
     </Popover>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md
index 6c4a2367d1..49722bd6e0 100644
--- a/components/progress/demo/circle-dynamic.md
+++ b/components/progress/demo/circle-dynamic.md
@@ -51,5 +51,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md
index 85a0dcd9d5..1d7e11547a 100644
--- a/components/progress/demo/circle-mini.md
+++ b/components/progress/demo/circle-mini.md
@@ -16,12 +16,11 @@ A smaller circular progress bar.
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress type="circle" percent={30} width={80} />
     <Progress type="circle" percent={70} width={80} status="exception" />
     <Progress type="circle" percent={100} width={80} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
index f195bd2313..db03cce586 100644
--- a/components/progress/demo/circle.md
+++ b/components/progress/demo/circle.md
@@ -16,13 +16,12 @@ A circular progress bar.
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/progress/demo/dashboard.md b/components/progress/demo/dashboard.md
index 12578a05a8..32cb4249b3 100644
--- a/components/progress/demo/dashboard.md
+++ b/components/progress/demo/dashboard.md
@@ -16,11 +16,10 @@ By setting `type=dashboard`, you can get a dashboard style of progress easily. M
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress type="dashboard" percent={75} />
     <Progress type="dashboard" percent={75} gapDegree={30} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md
index 6adcc953be..a48519b7fd 100644
--- a/components/progress/demo/dynamic.md
+++ b/components/progress/demo/dynamic.md
@@ -51,5 +51,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index bb9cde13b6..e2e43691c6 100644
--- a/components/progress/demo/format.md
+++ b/components/progress/demo/format.md
@@ -16,12 +16,11 @@ You can set a custom text by setting the `format` prop.
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/progress/demo/gradient-line.md b/components/progress/demo/gradient-line.md
index db0cc3472c..f16c5593d0 100644
--- a/components/progress/demo/gradient-line.md
+++ b/components/progress/demo/gradient-line.md
@@ -52,5 +52,5 @@ const Demo = () => (
   </>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md
index d5d13146c9..d9859a68ba 100644
--- a/components/progress/demo/line-mini.md
+++ b/components/progress/demo/line-mini.md
@@ -16,13 +16,12 @@ Appropriate for a narrow area.
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div style={{ width: 170 }}>
     <Progress percent={30} size="small" />
     <Progress percent={50} size="small" status="active" />
     <Progress percent={70} size="small" status="exception" />
     <Progress percent={100} size="small" />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md
index e896f42f73..829a30de9b 100644
--- a/components/progress/demo/line.md
+++ b/components/progress/demo/line.md
@@ -16,14 +16,13 @@ A standard progress bar.
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress percent={30} />
     <Progress percent={50} status="active" />
     <Progress percent={70} status="exception" />
     <Progress percent={100} />
     <Progress percent={50} showInfo={false} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/progress/demo/linecap.md b/components/progress/demo/linecap.md
index 3b434ffc1f..ac1d25e828 100644
--- a/components/progress/demo/linecap.md
+++ b/components/progress/demo/linecap.md
@@ -16,12 +16,11 @@ By setting `strokeLinecap="square"`, you can change the linecaps from round to s
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress strokeLinecap="square" percent={75} />
     <Progress strokeLinecap="square" type="circle" percent={75} />
     <Progress strokeLinecap="square" type="dashboard" percent={75} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md
index 028c43d309..c816d54fdc 100644
--- a/components/progress/demo/segment.md
+++ b/components/progress/demo/segment.md
@@ -16,7 +16,7 @@ A standard progress bar. Doesn't support trail color when `type="circle|dashboar
 ```jsx
 import { Tooltip, Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} success={{ percent: 30 }} />
@@ -29,7 +29,6 @@ ReactDOM.render(
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} success={{ percent: 30 }} type="dashboard" />
     </Tooltip>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/progress/demo/steps.md b/components/progress/demo/steps.md
index e2cb6c2a1c..00c5b1c341 100644
--- a/components/progress/demo/steps.md
+++ b/components/progress/demo/steps.md
@@ -16,14 +16,13 @@ A progress bar with steps.
 ```jsx
 import { Progress } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Progress percent={50} steps={3} />
     <br />
     <Progress percent={30} steps={5} />
     <br />
     <Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index 6bf8f872f5..318304786d 100644
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -23,7 +23,8 @@ Properties that shared by all types.
 | format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` |
 | percent | To set the completion percentage | number | 0 |
 | showInfo | Whether to display the progress value and the status icon | boolean | true |
-| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
+| size | To set the size of the progress | `default` \| `small` | `default` |
+| status | To set the status of the progress, options: `success` `exception` `normal` `active`(line only) | string | - |
 | strokeColor | The color of progress bar | string | - |
 | strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` |
 | success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - |
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index d55417296b..4afb423ba7 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -24,6 +24,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
 | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
+| size | 进度条大小 | `default` \| `small` | `default` |
 | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
 | strokeColor | 进度条的色彩 | string | - |
 | strokeLinecap | 进度条的样式 | `round` \| `square` | `round` |
@@ -41,11 +42,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
 
 ### `type="circle"`
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - |
-| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
-| width | 圆形进度条画布宽度，单位 px | number | 132 |
+| 属性        | 说明                                             | 类型             | 默认值 |
+| ----------- | ------------------------------------------------ | ---------------- | ------ |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变         | string \| object | -      |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number           | 6      |
+| width       | 圆形进度条画布宽度，单位 px                      | number           | 132    |
 
 ### `type="dashboard"`
 
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index c3f356245a..c5c6e14450 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -49,6 +49,7 @@ export interface ProgressProps {
   steps?: number;
   /** @deprecated Use `success` instead */
   successPercent?: number;
+  children?: React.ReactNode;
 }
 
 export default class Progress extends React.Component<ProgressProps> {
diff --git a/components/radio/demo/badge.md b/components/radio/demo/badge.md
index 1cfb2b9d46..d8eec05300 100644
--- a/components/radio/demo/badge.md
+++ b/components/radio/demo/badge.md
@@ -17,7 +17,7 @@ Test Badge style.
 ```jsx
 import { Radio, Badge } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Radio.Group buttonStyle="solid">
     <Badge count={1}>
       <Radio.Button value={1}>Click Me</Radio.Button>
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Badge count={2}>
       <Radio.Button value={2}>Not Me</Radio.Button>
     </Badge>
-  </Radio.Group>,
-  mountNode,
+  </Radio.Group>
 );
 ```
diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
index cfe33730a2..b7cbb5c0d7 100644
--- a/components/radio/demo/basic.md
+++ b/components/radio/demo/basic.md
@@ -16,5 +16,5 @@ The simplest use.
 ```jsx
 import { Radio } from 'antd';
 
-ReactDOM.render(<Radio>Radio</Radio>, mountNode);
+export default () => <Radio>Radio</Radio>;
 ```
diff --git a/components/radio/demo/disabled.md b/components/radio/demo/disabled.md
index 3fc6bef868..b2a0f2beba 100644
--- a/components/radio/demo/disabled.md
+++ b/components/radio/demo/disabled.md
@@ -45,5 +45,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/radio/demo/radiobutton-solid.md b/components/radio/demo/radiobutton-solid.md
index a672079a53..96b61f6448 100644
--- a/components/radio/demo/radiobutton-solid.md
+++ b/components/radio/demo/radiobutton-solid.md
@@ -16,7 +16,7 @@ Solid radio button style.
 ```jsx
 import { Radio } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Radio.Group defaultValue="a" buttonStyle="solid">
       <Radio.Button value="a">Hangzhou</Radio.Button>
@@ -32,7 +32,6 @@ ReactDOM.render(
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index 9793b1bbce..ad71316cf9 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -20,7 +20,7 @@ function onChange(e) {
   console.log(`radio checked:${e.target.value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Radio.Group onChange={onChange} defaultValue="a">
       <Radio.Button value="a">Hangzhou</Radio.Button>
@@ -42,7 +42,6 @@ ReactDOM.render(
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md
index 55d887565d..63a57d1755 100644
--- a/components/radio/demo/radiogroup-more.md
+++ b/components/radio/demo/radiogroup-more.md
@@ -46,5 +46,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/radio/demo/radiogroup-options.md b/components/radio/demo/radiogroup-options.md
index 929ce3275c..2d09dbc789 100644
--- a/components/radio/demo/radiogroup-options.md
+++ b/components/radio/demo/radiogroup-options.md
@@ -93,5 +93,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/radio/demo/radiogroup-with-name.md b/components/radio/demo/radiogroup-with-name.md
index eeb7a89b46..4d23b6e359 100644
--- a/components/radio/demo/radiogroup-with-name.md
+++ b/components/radio/demo/radiogroup-with-name.md
@@ -25,5 +25,5 @@ const App = () => (
   </Radio.Group>
 );
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md
index 7f02f648f0..f5998b523d 100644
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@@ -34,5 +34,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index 39c4919049..b8d622ca40 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -16,7 +16,7 @@ There are three sizes available: large, medium, and small. It can coordinate wit
 ```jsx
 import { Radio } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Radio.Group defaultValue="a" size="large">
       <Radio.Button value="a">Hangzhou</Radio.Button>
@@ -36,7 +36,6 @@ ReactDOM.render(
       <Radio.Button value="c">Beijing</Radio.Button>
       <Radio.Button value="d">Chengdu</Radio.Button>
     </Radio.Group>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md
index 6d66104609..b2c4a6bdc1 100644
--- a/components/rate/demo/basic.md
+++ b/components/rate/demo/basic.md
@@ -16,5 +16,5 @@ The simplest usage.
 ```jsx
 import { Rate } from 'antd';
 
-ReactDOM.render(<Rate />, mountNode);
+export default () => <Rate />;
 ```
diff --git a/components/rate/demo/character-function.md b/components/rate/demo/character-function.md
index f0b5df6062..2cb732114d 100644
--- a/components/rate/demo/character-function.md
+++ b/components/rate/demo/character-function.md
@@ -25,12 +25,11 @@ const customIcons = {
   5: <SmileOutlined />,
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <Rate defaultValue={2} character={({ index }) => index + 1} />
     <br />
     <Rate defaultValue={3} character={({ index }) => customIcons[index + 1]} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/rate/demo/character.md b/components/rate/demo/character.md
index 72ecb45004..0c18cd6dd1 100644
--- a/components/rate/demo/character.md
+++ b/components/rate/demo/character.md
@@ -17,14 +17,13 @@ Replace the default star to other character like alphabet, digit, iconfont or ev
 import { Rate } from 'antd';
 import { HeartOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Rate character={<HeartOutlined />} allowHalf />
     <br />
     <Rate character="A" allowHalf style={{ fontSize: 36 }} />
     <br />
     <Rate character="好" allowHalf />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/rate/demo/clear.md b/components/rate/demo/clear.md
index 4d26c3a204..bd342ba4cb 100644
--- a/components/rate/demo/clear.md
+++ b/components/rate/demo/clear.md
@@ -16,14 +16,13 @@ Support set allow to clear star when click again.
 ```jsx
 import { Rate } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Rate defaultValue={3} />
     <span className="ant-rate-text">allowClear: true</span>
     <br />
     <Rate allowClear={false} defaultValue={3} />
     <span className="ant-rate-text">allowClear: false</span>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md
index a372b1eefb..b2f5914518 100644
--- a/components/rate/demo/disabled.md
+++ b/components/rate/demo/disabled.md
@@ -16,5 +16,5 @@ Read only, can't use mouse to interact.
 ```jsx
 import { Rate } from 'antd';
 
-ReactDOM.render(<Rate disabled defaultValue={2} />, mountNode);
+export default () => <Rate disabled defaultValue={2} />;
 ```
diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md
index 71cbc245e6..da2cc2ee38 100644
--- a/components/rate/demo/half.md
+++ b/components/rate/demo/half.md
@@ -16,5 +16,5 @@ Support select half star.
 ```jsx
 import { Rate } from 'antd';
 
-ReactDOM.render(<Rate allowHalf defaultValue={2.5} />, mountNode);
+export default () => <Rate allowHalf defaultValue={2.5} />;
 ```
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
index 7e388fa5b3..92a9fccab5 100644
--- a/components/rate/demo/text.md
+++ b/components/rate/demo/text.md
@@ -38,5 +38,5 @@ class Rater extends React.Component {
   }
 }
 
-ReactDOM.render(<Rater />, mountNode);
+export default () => <Rater />;
 ```
diff --git a/components/result/__tests__/index.test.js b/components/result/__tests__/index.test.js
index da25b97436..09b31f4f2d 100644
--- a/components/result/__tests__/index.test.js
+++ b/components/result/__tests__/index.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Result from '..';
 import Button from '../../button';
 import mountTest from '../../../tests/shared/mountTest';
@@ -60,12 +62,15 @@ describe('Result', () => {
 
   it('should warning when pass a string as icon props', () => {
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Result title="404" icon="ab" />);
+
+    render(<Result title="404" icon="ab" />);
     expect(warnSpy).not.toHaveBeenCalled();
-    mount(<Result title="404" icon="smile" />);
+
+    render(<Result title="404" icon="smile" />);
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Result] \`icon\` is using ReactNode instead of string naming in v4. Please check \`smile\` at https://ant.design/components/icon`,
     );
+
     warnSpy.mockRestore();
   });
 });
diff --git a/components/result/demo/403.md b/components/result/demo/403.md
index 80f263a926..1679f193ca 100644
--- a/components/result/demo/403.md
+++ b/components/result/demo/403.md
@@ -16,13 +16,12 @@ you are not authorized to access this page.
 ```jsx
 import { Result, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Result
     status="403"
     title="403"
     subTitle="Sorry, you are not authorized to access this page."
     extra={<Button type="primary">Back Home</Button>}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/demo/404.md b/components/result/demo/404.md
index 3ab3c22590..db53301a84 100644
--- a/components/result/demo/404.md
+++ b/components/result/demo/404.md
@@ -16,13 +16,12 @@ The page you visited does not exist.
 ```jsx
 import { Result, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Result
     status="404"
     title="404"
     subTitle="Sorry, the page you visited does not exist."
     extra={<Button type="primary">Back Home</Button>}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/demo/500.md b/components/result/demo/500.md
index 30d0c2d512..8852f09e8a 100644
--- a/components/result/demo/500.md
+++ b/components/result/demo/500.md
@@ -16,13 +16,12 @@ Something went wrong on server.
 ```jsx
 import { Result, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Result
     status="500"
     title="500"
     subTitle="Sorry, something went wrong."
     extra={<Button type="primary">Back Home</Button>}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/demo/customIcon.md b/components/result/demo/customIcon.md
index 68b2a5413f..662033a31b 100644
--- a/components/result/demo/customIcon.md
+++ b/components/result/demo/customIcon.md
@@ -17,12 +17,11 @@ Custom icon.
 import { Result, Button } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Result
     icon={<SmileOutlined />}
     title="Great, we have done all the operations!"
     extra={<Button type="primary">Next</Button>}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/demo/error.md b/components/result/demo/error.md
index a74da5deff..bb5dad845c 100644
--- a/components/result/demo/error.md
+++ b/components/result/demo/error.md
@@ -19,7 +19,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 
 const { Paragraph, Text } = Typography;
 
-ReactDOM.render(
+export default () => (
   <Result
     status="error"
     title="Submission Failed"
@@ -51,8 +51,7 @@ ReactDOM.render(
         eligible to apply. <a>Apply Unlock &gt;</a>
       </Paragraph>
     </div>
-  </Result>,
-  mountNode,
+  </Result>
 );
 ```
 
diff --git a/components/result/demo/info.md b/components/result/demo/info.md
index 2387567c3d..62ae71f472 100644
--- a/components/result/demo/info.md
+++ b/components/result/demo/info.md
@@ -16,7 +16,7 @@ Show processing results.
 ```jsx
 import { Result, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Result
     title="Your operation has been executed"
     extra={
@@ -24,7 +24,6 @@ ReactDOM.render(
         Go Console
       </Button>
     }
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/demo/success.md b/components/result/demo/success.md
index 7326b6cbc9..8f7a547e4d 100644
--- a/components/result/demo/success.md
+++ b/components/result/demo/success.md
@@ -16,7 +16,7 @@ Show successful results.
 ```jsx
 import { Result, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Result
     status="success"
     title="Successfully Purchased Cloud Server ECS!"
@@ -27,7 +27,6 @@ ReactDOM.render(
       </Button>,
       <Button key="buy">Buy Again</Button>,
     ]}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/demo/warning.md b/components/result/demo/warning.md
index b52bde5f5d..2b6aaf4ad9 100644
--- a/components/result/demo/warning.md
+++ b/components/result/demo/warning.md
@@ -16,7 +16,7 @@ The result of the warning.
 ```jsx
 import { Result, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Result
     status="warning"
     title="There are some problems with your operation."
@@ -25,7 +25,6 @@ ReactDOM.render(
         Go Console
       </Button>
     }
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 1965e3df14..433e5bf5c8 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -37,6 +37,7 @@ export interface ResultProps {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
+  children?: React.ReactNode;
 }
 
 // ExceptionImageMap keys
@@ -76,9 +77,9 @@ const renderExtra = (prefixCls: string, { extra }: ResultProps) =>
   extra && <div className={`${prefixCls}-extra`}>{extra}</div>;
 
 export interface ResultType extends React.FC<ResultProps> {
-  PRESENTED_IMAGE_404: React.ReactNode;
-  PRESENTED_IMAGE_403: React.ReactNode;
-  PRESENTED_IMAGE_500: React.ReactNode;
+  PRESENTED_IMAGE_404: React.FC;
+  PRESENTED_IMAGE_403: React.FC;
+  PRESENTED_IMAGE_500: React.FC;
 }
 
 const Result: ResultType = ({
diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md
index db36709ec3..91cdc0fa4f 100644
--- a/components/select/demo/automatic-tokenization.md
+++ b/components/select/demo/automatic-tokenization.md
@@ -27,10 +27,9 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <Select mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
     {children}
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 94eff8e63d..4e91695fdc 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -22,7 +22,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
       <Option value="jack">Jack</Option>
@@ -41,7 +41,6 @@ ReactDOM.render(
     <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
       <Option value="lucy">Lucy</Option>
     </Select>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/select/demo/big-data.md b/components/select/demo/big-data.md
index 4352586c2d..01cf9b6645 100644
--- a/components/select/demo/big-data.md
+++ b/components/select/demo/big-data.md
@@ -31,7 +31,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Title level={3}>Ant Design 4.0</Title>
     <Title level={4}>{options.length} Items</Title>
@@ -52,7 +52,6 @@ ReactDOM.render(
       src="https://codesandbox.io/embed/solitary-voice-m3vme?fontsize=14&hidenavigation=1&theme=dark&view=preview"
       style={{ width: '100%', height: 300 }}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/select/demo/bordered.md b/components/select/demo/bordered.md
index 5dfc87f9d0..88b927e445 100644
--- a/components/select/demo/bordered.md
+++ b/components/select/demo/bordered.md
@@ -18,7 +18,7 @@ import { Select } from 'antd';
 
 const { Option } = Select;
 
-ReactDOM.render(
+export default () => (
   <>
     <Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
       <Option value="jack">Jack</Option>
@@ -28,7 +28,6 @@ ReactDOM.render(
     <Select defaultValue="lucy" style={{ width: 120 }} disabled bordered={false}>
       <Option value="lucy">Lucy</Option>
     </Select>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index 1ef5cb9fee..44ff9f37af 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -56,5 +56,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/select/demo/custom-dropdown-menu.md b/components/select/demo/custom-dropdown-menu.md
index 3b8e6e9ea8..6210c4235a 100644
--- a/components/select/demo/custom-dropdown-menu.md
+++ b/components/select/demo/custom-dropdown-menu.md
@@ -60,5 +60,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/select/demo/custom-tag-render.md b/components/select/demo/custom-tag-render.md
index 3c13e8df5b..291b2f4d08 100644
--- a/components/select/demo/custom-tag-render.md
+++ b/components/select/demo/custom-tag-render.md
@@ -37,7 +37,7 @@ function tagRender(props) {
   );
 }
 
-ReactDOM.render(
+export default () => (
   <Select
     mode="multiple"
     showArrow
@@ -45,7 +45,6 @@ ReactDOM.render(
     defaultValue={['gold', 'cyan']}
     style={{ width: '100%' }}
     options={options}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/select/demo/debug.md b/components/select/demo/debug.md
index 0f618b1791..394d0fc53a 100644
--- a/components/select/demo/debug.md
+++ b/components/select/demo/debug.md
@@ -23,7 +23,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <div
     style={{
       width: 500,
@@ -61,8 +61,7 @@ ReactDOM.render(
     </Select>
     <span className="debug-align">AntDesign</span>
     <Button>222</Button>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/select/demo/hide-selected.md b/components/select/demo/hide-selected.md
index 59c7ad521f..7c2063d46e 100644
--- a/components/select/demo/hide-selected.md
+++ b/components/select/demo/hide-selected.md
@@ -48,5 +48,5 @@ class SelectWithHiddenSelectedOptions extends React.Component {
   }
 }
 
-ReactDOM.render(<SelectWithHiddenSelectedOptions />, mountNode);
+export default () => <SelectWithHiddenSelectedOptions />;
 ```
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index a437665de0..5c54c69bb3 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -26,7 +26,7 @@ function handleChange(value) {
   console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
 }
 
-ReactDOM.render(
+export default () => (
   <Select
     labelInValue
     defaultValue={{ value: 'lucy' }}
@@ -35,7 +35,6 @@ ReactDOM.render(
   >
     <Option value="jack">Jack (100)</Option>
     <Option value="lucy">Lucy (101)</Option>
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index e8ad932454..5b0d0778c4 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -27,7 +27,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Select
       mode="multiple"
@@ -50,7 +50,6 @@ ReactDOM.render(
     >
       {children}
     </Select>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index 5247817395..9ba4cdf02a 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -22,7 +22,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
     <OptGroup label="Manager">
       <Option value="jack">Jack</Option>
@@ -31,7 +31,6 @@ ReactDOM.render(
     <OptGroup label="Engineer">
       <Option value="Yiminghe">yiminghe</Option>
     </OptGroup>
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md
index a1f5cb07df..d8dd439907 100644
--- a/components/select/demo/option-label-prop.md
+++ b/components/select/demo/option-label-prop.md
@@ -22,7 +22,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <Select
     mode="multiple"
     style={{ width: '100%' }}
@@ -63,8 +63,7 @@ ReactDOM.render(
         Korea (韩国)
       </div>
     </Option>
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
 
diff --git a/components/select/demo/placement.md b/components/select/demo/placement.md
index 7ccca34501..72e8fa6556 100644
--- a/components/select/demo/placement.md
+++ b/components/select/demo/placement.md
@@ -49,5 +49,5 @@ const SetPlacementDemo = () => {
   );
 };
 
-ReactDOM.render(<SetPlacementDemo />, mountNode);
+export default () => <SetPlacementDemo />;
 ```
diff --git a/components/select/demo/responsive.md b/components/select/demo/responsive.md
index 4cafa74edc..2be010cb55 100644
--- a/components/select/demo/responsive.md
+++ b/components/select/demo/responsive.md
@@ -54,5 +54,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index b98beb7b97..756f50b9f3 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -94,5 +94,5 @@ class SearchInput extends React.Component {
   }
 }
 
-ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);
+export default () => <SearchInput placeholder="input search text" style={{ width: 200 }} />;
 ```
diff --git a/components/select/demo/search-sort.md b/components/select/demo/search-sort.md
index 9408f6eebb..6823b8713d 100644
--- a/components/select/demo/search-sort.md
+++ b/components/select/demo/search-sort.md
@@ -18,7 +18,7 @@ import { Select } from 'antd';
 
 const { Option } = Select;
 
-ReactDOM.render(
+export default () => (
   <Select
     showSearch
     style={{ width: 200 }}
@@ -37,7 +37,6 @@ ReactDOM.render(
     <Option value="4">Identified</Option>
     <Option value="5">Resolved</Option>
     <Option value="6">Cancelled</Option>
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index 89a525ebe7..1aa830352e 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -26,7 +26,7 @@ function onSearch(val) {
   console.log('search:', val);
 }
 
-ReactDOM.render(
+export default () => (
   <Select
     showSearch
     placeholder="Select a person"
@@ -40,7 +40,6 @@ ReactDOM.render(
     <Option value="jack">Jack</Option>
     <Option value="lucy">Lucy</Option>
     <Option value="tom">Tom</Option>
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
diff --git a/components/select/demo/select-users.md b/components/select/demo/select-users.md
index a5228e5a87..d825551749 100644
--- a/components/select/demo/select-users.md
+++ b/components/select/demo/select-users.md
@@ -102,5 +102,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index 4080298c4b..f3943c23c2 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -72,7 +72,7 @@ const SelectSizesDemo = () => {
   );
 };
 
-ReactDOM.render(<SelectSizesDemo />, mountNode);
+export default () => <SelectSizesDemo />;
 ```
 
 ```css
diff --git a/components/select/demo/status.md b/components/select/demo/status.md
index cb3ba5e6d1..f6a5ef0b0b 100644
--- a/components/select/demo/status.md
+++ b/components/select/demo/status.md
@@ -24,7 +24,7 @@ const Status: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<Status />, mountNode);
+export default () => <Status />;
 ```
 
 ```css
diff --git a/components/select/demo/suffix.md b/components/select/demo/suffix.md
index ac7a4bd3d5..ef8041afc1 100644
--- a/components/select/demo/suffix.md
+++ b/components/select/demo/suffix.md
@@ -26,7 +26,7 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Select
       suffixIcon={smileIcon}
@@ -44,7 +44,6 @@ ReactDOM.render(
     <Select suffixIcon={mehIcon} defaultValue="lucy" style={{ width: 120 }} disabled>
       <Option value="lucy">Lucy</Option>
     </Select>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index a684c84181..ec8e18d511 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -27,10 +27,9 @@ function handleChange(value) {
   console.log(`selected ${value}`);
 }
 
-ReactDOM.render(
+export default () => (
   <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange}>
     {children}
-  </Select>,
-  mountNode,
+  </Select>
 );
 ```
diff --git a/components/select/utils/iconUtil.tsx b/components/select/utils/iconUtil.tsx
index 72257c7150..ad9d1c5aa3 100644
--- a/components/select/utils/iconUtil.tsx
+++ b/components/select/utils/iconUtil.tsx
@@ -7,6 +7,8 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 
+type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+
 export default function getIcons({
   suffixIcon,
   clearIcon,
@@ -20,9 +22,9 @@ export default function getIcons({
   feedbackIcon,
 }: {
   suffixIcon?: React.ReactNode;
-  clearIcon?: React.ReactNode;
-  menuItemSelectedIcon?: React.ReactNode;
-  removeIcon?: React.ReactNode;
+  clearIcon?: RenderNode;
+  menuItemSelectedIcon?: RenderNode;
+  removeIcon?: RenderNode;
   loading?: boolean;
   multiple?: boolean;
   hasFeedback?: boolean;
diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx
index 6fcc736e4b..7703803bb2 100644
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@@ -161,7 +161,7 @@ const Skeleton = (props: SkeletonProps) => {
       </div>
     );
   }
-  return children as React.ReactElement;
+  return typeof children !== 'undefined' ? (children as React.ReactElement) : null;
 };
 
 Skeleton.defaultProps = {
diff --git a/components/skeleton/__tests__/__snapshots__/index.test.js.snap b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
index 8c921b9aad..3f081273e0 100644
--- a/components/skeleton/__tests__/__snapshots__/index.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
@@ -481,6 +481,8 @@ exports[`Skeleton rtl render component should be rendered correctly in RTL direc
 </div>
 `;
 
+exports[`Skeleton should display without children and falsy loading props 1`] = `null`;
+
 exports[`Skeleton should round title and paragraph 1`] = `
 <div
   class="ant-skeleton ant-skeleton-round"
diff --git a/components/skeleton/__tests__/index.test.js b/components/skeleton/__tests__/index.test.js
index 1fbbeefd2c..3288ff0049 100644
--- a/components/skeleton/__tests__/index.test.js
+++ b/components/skeleton/__tests__/index.test.js
@@ -34,6 +34,16 @@ describe('Skeleton', () => {
     expect(wrapperSmall.render()).toMatchSnapshot();
   });
 
+  it('should display without children and falsy loading props', () => {
+    const wrapper = mount(<Skeleton loading={false} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('should display with empty children and falsy loading props', () => {
+    const wrapper = mount(<Skeleton loading={false}>{0}</Skeleton>);
+    expect(wrapper.text()).toBe('0');
+  });
+
   it('should display children', () => {
     const wrapper = mount(<Skeleton loading={false}>{[1, 2, 3]}</Skeleton>);
     expect(wrapper.text()).toBe('123');
diff --git a/components/skeleton/demo/active.md b/components/skeleton/demo/active.md
index d010cd23bd..ca04692467 100644
--- a/components/skeleton/demo/active.md
+++ b/components/skeleton/demo/active.md
@@ -16,5 +16,5 @@ Display active animation.
 ```jsx
 import { Skeleton } from 'antd';
 
-ReactDOM.render(<Skeleton active />, mountNode);
+export default () => <Skeleton active />;
 ```
diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md
index 7b114db720..0420749e79 100644
--- a/components/skeleton/demo/basic.md
+++ b/components/skeleton/demo/basic.md
@@ -16,5 +16,5 @@ Simplest Skeleton usage.
 ```jsx
 import { Skeleton } from 'antd';
 
-ReactDOM.render(<Skeleton />, mountNode);
+export default () => <Skeleton />;
 ```
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
index 98ddcd8034..f721648a5c 100644
--- a/components/skeleton/demo/children.md
+++ b/components/skeleton/demo/children.md
@@ -49,7 +49,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>
diff --git a/components/skeleton/demo/complex.md b/components/skeleton/demo/complex.md
index 058c13fa7b..076c2e4506 100644
--- a/components/skeleton/demo/complex.md
+++ b/components/skeleton/demo/complex.md
@@ -16,5 +16,5 @@ Complex combination with avatar and multiple paragraphs.
 ```jsx
 import { Skeleton } from 'antd';
 
-ReactDOM.render(<Skeleton avatar paragraph={{ rows: 4 }} />, mountNode);
+export default () => <Skeleton avatar paragraph={{ rows: 4 }} />;
 ```
diff --git a/components/skeleton/demo/element.md b/components/skeleton/demo/element.md
index b74572d686..e21cf76666 100644
--- a/components/skeleton/demo/element.md
+++ b/components/skeleton/demo/element.md
@@ -93,5 +93,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md
index f97395aa5f..19df092bda 100644
--- a/components/skeleton/demo/list.md
+++ b/components/skeleton/demo/list.md
@@ -93,7 +93,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 <style>
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index db9df0fb8d..1f91ae6da4 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -37,7 +37,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>
diff --git a/components/slider/demo/dragableTrack.md b/components/slider/demo/dragableTrack.md
index b98e6f69fc..782f64bbf9 100644
--- a/components/slider/demo/dragableTrack.md
+++ b/components/slider/demo/dragableTrack.md
@@ -16,5 +16,5 @@ Make range track draggable when set `range.draggableTrack`.
 ```jsx
 import { Slider } from 'antd';
 
-ReactDOM.render(<Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />, mountNode);
+export default () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;
 ```
diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md
index 4e8863874a..5f20e7ff91 100644
--- a/components/slider/demo/event.md
+++ b/components/slider/demo/event.md
@@ -24,7 +24,7 @@ function onAfterChange(value) {
   console.log('onAfterChange: ', value);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
     <Slider
@@ -34,7 +34,6 @@ ReactDOM.render(
       onChange={onChange}
       onAfterChange={onAfterChange}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index 506f5a770c..d212d7df2a 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -42,7 +42,7 @@ class IconSlider extends React.Component {
   }
 }
 
-ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
+export default () => <IconSlider min={0} max={20} />;
 ```
 
 ```css
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
index 222369e2d3..bf55055f9d 100644
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@@ -95,11 +95,10 @@ class DecimalStep extends React.Component {
   }
 }
 
-ReactDOM.render(
+export default () => (
   <div>
     <IntegerStep />
     <DecimalStep />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index 8d2a4b7faa..ba331a071d 100644
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@@ -28,7 +28,7 @@ const marks = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <h4>included=true</h4>
     <Slider marks={marks} defaultValue={37} />
@@ -42,8 +42,7 @@ ReactDOM.render(
 
     <h4>step=null</h4>
     <Slider marks={marks} step={null} defaultValue={37} />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/slider/demo/reverse.md b/components/slider/demo/reverse.md
index 06d3bf95a6..eaee144c09 100644
--- a/components/slider/demo/reverse.md
+++ b/components/slider/demo/reverse.md
@@ -37,5 +37,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/slider/demo/show-tooltip.md b/components/slider/demo/show-tooltip.md
index a944976526..ffb3e35899 100644
--- a/components/slider/demo/show-tooltip.md
+++ b/components/slider/demo/show-tooltip.md
@@ -16,5 +16,5 @@ When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not s
 ```jsx
 import { Slider } from 'antd';
 
-ReactDOM.render(<Slider defaultValue={30} tooltipVisible />, mountNode);
+export default () => <Slider defaultValue={30} tooltipVisible />;
 ```
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index 13206c8b5e..6f40cd8d73 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -20,11 +20,10 @@ function formatter(value) {
   return `${value}%`;
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Slider tipFormatter={formatter} />
     <Slider tipFormatter={null} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/slider/demo/vertical.md b/components/slider/demo/vertical.md
index 6d5bc78d45..d1b24b3f46 100644
--- a/components/slider/demo/vertical.md
+++ b/components/slider/demo/vertical.md
@@ -34,7 +34,7 @@ const marks = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <div style={style}>
       <Slider vertical defaultValue={30} />
@@ -45,7 +45,6 @@ ReactDOM.render(
     <div style={style}>
       <Slider vertical range marks={marks} defaultValue={[26, 37]} />
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/space/demo/align.md b/components/space/demo/align.md
index b48177b9f4..678466852a 100644
--- a/components/space/demo/align.md
+++ b/components/space/demo/align.md
@@ -16,7 +16,7 @@ Config item align.
 ```jsx
 import { Space, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div className="space-align-container">
     <div className="space-align-block">
       <Space align="center">
@@ -46,8 +46,7 @@ ReactDOM.render(
         <span className="mock-block">Block</span>
       </Space>
     </div>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/space/demo/base.md b/components/space/demo/base.md
index 2cf147bb99..c42d71bdf1 100644
--- a/components/space/demo/base.md
+++ b/components/space/demo/base.md
@@ -34,5 +34,5 @@ function SpaceDemo() {
   );
 }
 
-ReactDOM.render(<SpaceDemo />, mountNode);
+export default () => <SpaceDemo />;
 ```
diff --git a/components/space/demo/customize.md b/components/space/demo/customize.md
index 42391d333e..b0778bf8ad 100644
--- a/components/space/demo/customize.md
+++ b/components/space/demo/customize.md
@@ -35,5 +35,5 @@ function SpaceCustomizeSize() {
   );
 }
 
-ReactDOM.render(<SpaceCustomizeSize />, mountNode);
+export default () => <SpaceCustomizeSize />;
 ```
diff --git a/components/space/demo/debug.md b/components/space/demo/debug.md
index 78c4e7cf2e..bdf5677981 100644
--- a/components/space/demo/debug.md
+++ b/components/space/demo/debug.md
@@ -17,7 +17,7 @@ Debug usage
 ```jsx
 import { Space, Button, Popconfirm } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Space>
     <>
       Button
@@ -36,7 +36,6 @@ ReactDOM.render(
     Button
     {null}
     {undefined}
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/space/demo/gap-in-line.md b/components/space/demo/gap-in-line.md
index ba82b25242..9f873daba5 100644
--- a/components/space/demo/gap-in-line.md
+++ b/components/space/demo/gap-in-line.md
@@ -46,5 +46,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/space/demo/size.md b/components/space/demo/size.md
index 4070591935..146434a536 100644
--- a/components/space/demo/size.md
+++ b/components/space/demo/size.md
@@ -43,5 +43,5 @@ function SpaceSize() {
   );
 }
 
-ReactDOM.render(<SpaceSize />, mountNode);
+export default () => <SpaceSize />;
 ```
diff --git a/components/space/demo/split.md b/components/space/demo/split.md
index 422996e1e2..8dadd07e79 100644
--- a/components/space/demo/split.md
+++ b/components/space/demo/split.md
@@ -26,5 +26,5 @@ function SpaceSplit() {
   );
 }
 
-ReactDOM.render(<SpaceSplit />, mountNode);
+export default () => <SpaceSplit />;
 ```
diff --git a/components/space/demo/vertical.md b/components/space/demo/vertical.md
index 22edfdab48..60a5805865 100644
--- a/components/space/demo/vertical.md
+++ b/components/space/demo/vertical.md
@@ -35,5 +35,5 @@ function SpaceVertical() {
   );
 }
 
-ReactDOM.render(<SpaceVertical />, mountNode);
+export default () => <SpaceVertical />;
 ```
diff --git a/components/space/demo/wrap.md b/components/space/demo/wrap.md
index b3570b5bbe..7c111cf1c1 100644
--- a/components/space/demo/wrap.md
+++ b/components/space/demo/wrap.md
@@ -25,5 +25,5 @@ const Demo = () => (
   </Space>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
index cca5e4837d..bbc744542d 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -13,8 +13,8 @@ title:
 
 A simple loading status.
 
-```jsx
+```tsx
 import { Spin } from 'antd';
 
-ReactDOM.render(<Spin />, mountNode);
+export default () => <Spin />;
 ```
diff --git a/components/spin/demo/custom-indicator.md b/components/spin/demo/custom-indicator.md
index bc4782b5b4..786f329c3f 100644
--- a/components/spin/demo/custom-indicator.md
+++ b/components/spin/demo/custom-indicator.md
@@ -19,5 +19,5 @@ import { LoadingOutlined } from '@ant-design/icons';
 
 const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
-ReactDOM.render(<Spin indicator={antIcon} />, mountNode);
+export default () => <Spin indicator={antIcon} />;
 ```
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index 7de1c7bb3d..7a330e5d95 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -45,5 +45,5 @@ class Card extends React.Component {
   }
 }
 
-ReactDOM.render(<Card />, mountNode);
+export default () => <Card />;
 ```
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index e2f5942023..d5ddd5f517 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -13,14 +13,13 @@ title:
 
 Spin in a container.
 
-```jsx
+```tsx
 import { Spin } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <div className="example">
     <Spin />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 26e718bc5c..638715a4ab 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -13,13 +13,13 @@ title:
 
 Embedding content into `Spin` will set it into loading state.
 
-```jsx
+```tsx
 import { Spin, Switch, Alert } from 'antd';
 
 class Card extends React.Component {
   state = { loading: false };
 
-  toggle = value => {
+  toggle = (value: boolean) => {
     this.setState({ loading: value });
   };
 
@@ -42,5 +42,5 @@ class Card extends React.Component {
   }
 }
 
-ReactDOM.render(<Card />, mountNode);
+export default () => <Card />;
 ```
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
index 2737994fa1..acfd7b7e34 100644
--- a/components/spin/demo/size.md
+++ b/components/spin/demo/size.md
@@ -16,12 +16,11 @@ A small `Spin` is used for loading text, default sized `Spin` for loading a card
 ```jsx
 import { Spin, Space } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Space size="middle">
     <Spin size="small" />
     <Spin />
     <Spin size="large" />
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index 776d104f01..9c48093b57 100644
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@@ -16,14 +16,13 @@ Customized description content.
 ```jsx
 import { Spin, Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Spin tip="Loading...">
     <Alert
       message="Alert message title"
       description="Further details about the context of this alert."
       type="info"
     />
-  </Spin>,
-  mountNode,
+  </Spin>
 );
 ```
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 4c1b1163e0..32d115b8d7 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -20,6 +20,7 @@ export interface SpinProps {
   delay?: number;
   wrapperClassName?: string;
   indicator?: SpinIndicator;
+  children?: React.ReactNode;
 }
 
 export interface SpinState {
diff --git a/components/statistic/demo/basic.md b/components/statistic/demo/basic.md
index 8b5f7dbf0f..efc6e05dc7 100644
--- a/components/statistic/demo/basic.md
+++ b/components/statistic/demo/basic.md
@@ -16,7 +16,7 @@ Simplest Usage.
 ```jsx
 import { Statistic, Row, Col, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Row gutter={16}>
     <Col span={12}>
       <Statistic title="Active Users" value={112893} />
@@ -30,7 +30,6 @@ ReactDOM.render(
     <Col span={12}>
       <Statistic title="Active Users" value={112893} loading />
     </Col>
-  </Row>,
-  mountNode,
+  </Row>
 );
 ```
diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md
index 8760c3c723..b7664c1ca4 100644
--- a/components/statistic/demo/card.md
+++ b/components/statistic/demo/card.md
@@ -17,7 +17,7 @@ Display statistic data in Card.
 import { Statistic, Card, Row, Col } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <div className="site-statistic-demo-card">
     <Row gutter={16}>
       <Col span={12}>
@@ -45,8 +45,7 @@ ReactDOM.render(
         </Card>
       </Col>
     </Row>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/statistic/demo/countdown.md b/components/statistic/demo/countdown.md
index c5041eda9d..f981270515 100644
--- a/components/statistic/demo/countdown.md
+++ b/components/statistic/demo/countdown.md
@@ -29,7 +29,7 @@ function onChange(val) {
   }
 }
 
-ReactDOM.render(
+export default () => (
   <Row gutter={16}>
     <Col span={12}>
       <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
@@ -43,7 +43,6 @@ ReactDOM.render(
     <Col span={12}>
       <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
     </Col>
-  </Row>,
-  mountNode,
+  </Row>
 );
 ```
diff --git a/components/statistic/demo/unit.md b/components/statistic/demo/unit.md
index 8162641e96..aaf1e9aca9 100644
--- a/components/statistic/demo/unit.md
+++ b/components/statistic/demo/unit.md
@@ -17,7 +17,7 @@ Add unit through `prefix` and `suffix`.
 import { Statistic, Row, Col } from 'antd';
 import { LikeOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Row gutter={16}>
     <Col span={12}>
       <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Col span={12}>
       <Statistic title="Unmerged" value={93} suffix="/ 100" />
     </Col>
-  </Row>,
-  mountNode,
+  </Row>
 );
 ```
diff --git a/components/steps/demo/clickable.md b/components/steps/demo/clickable.md
index d80119d42c..840f0b2985 100644
--- a/components/steps/demo/clickable.md
+++ b/components/steps/demo/clickable.md
@@ -51,5 +51,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index be65cb5c8d..fdf327b961 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -30,13 +30,12 @@ const customDot = (dot, { status, index }) => (
   </Popover>
 );
 
-ReactDOM.render(
+export default () => (
   <Steps current={1} progressDot={customDot}>
     <Step title="Finished" description="You can hover on the dot." />
     <Step title="In Progress" description="You can hover on the dot." />
     <Step title="Waiting" description="You can hover on the dot." />
     <Step title="Waiting" description="You can hover on the dot." />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
index a1b3ff2c8b..4332e76204 100644
--- a/components/steps/demo/error.md
+++ b/components/steps/demo/error.md
@@ -18,12 +18,11 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps current={1} status="error">
     <Step title="Finished" description="This is a description" />
     <Step title="In Process" description="This is a description" />
     <Step title="Waiting" description="This is a description" />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
index 6ac47ed387..d20e4cc6d3 100644
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@@ -19,13 +19,12 @@ import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps>
     <Step status="finish" title="Login" icon={<UserOutlined />} />
     <Step status="finish" title="Verification" icon={<SolutionOutlined />} />
     <Step status="process" title="Pay" icon={<LoadingOutlined />} />
     <Step status="wait" title="Done" icon={<SmileOutlined />} />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md
index d16b1df55a..110ec3b6f6 100644
--- a/components/steps/demo/nav.md
+++ b/components/steps/demo/nav.md
@@ -86,7 +86,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/steps/demo/progress-debug.md b/components/steps/demo/progress-debug.md
index 18b9c5a10e..363d3a9071 100644
--- a/components/steps/demo/progress-debug.md
+++ b/components/steps/demo/progress-debug.md
@@ -63,5 +63,5 @@ function Demo() {
   );
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/steps/demo/progress-dot-small.md b/components/steps/demo/progress-dot-small.md
index 038e422679..443f3d8f21 100644
--- a/components/steps/demo/progress-dot-small.md
+++ b/components/steps/demo/progress-dot-small.md
@@ -19,7 +19,7 @@ import { Steps, Divider } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <>
     <Steps progressDot current={1} size="small">
       <Step title="Finished" description="This is a description." />
@@ -34,7 +34,6 @@ ReactDOM.render(
       <Step title="Waiting" description="This is a description." />
       <Step title="Waiting" description="This is a description." />
     </Steps>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index b5e4452ebc..8fd6fa03dd 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -18,7 +18,7 @@ import { Steps, Divider } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <>
     <Steps progressDot current={1}>
       <Step title="Finished" description="This is a description." />
@@ -33,7 +33,6 @@ ReactDOM.render(
       <Step title="Waiting" description="This is a description." />
       <Step title="Waiting" description="This is a description." />
     </Steps>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/steps/demo/progress.md b/components/steps/demo/progress.md
index a31e597edd..b806119115 100644
--- a/components/steps/demo/progress.md
+++ b/components/steps/demo/progress.md
@@ -18,12 +18,11 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps current={1} percent={60}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
index fd4f4d3a3b..3f2d787479 100644
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@@ -18,12 +18,11 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
index d1b4d0379a..b94cdb9bb4 100644
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@@ -18,12 +18,11 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps size="small" current={1}>
     <Step title="Finished" />
     <Step title="In Progress" />
     <Step title="Waiting" />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index e2484d2cfa..4ede4f7f5c 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -73,7 +73,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/steps/demo/steps-in-steps.md b/components/steps/demo/steps-in-steps.md
index db91847d0a..8ab398f0a1 100644
--- a/components/steps/demo/steps-in-steps.md
+++ b/components/steps/demo/steps-in-steps.md
@@ -50,5 +50,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
index 6c64a0acb6..25354e4cfb 100644
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@@ -18,12 +18,11 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps direction="vertical" size="small" current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
index d803844ab2..e412227d55 100644
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@@ -18,12 +18,11 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-ReactDOM.render(
+export default () => (
   <Steps direction="vertical" current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>,
-  mountNode,
+  </Steps>
 );
 ```
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
index f8f22062bf..a69c11b6f1 100644
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@@ -20,7 +20,7 @@ function onChange(checked) {
   console.log(`switch to ${checked}`);
 }
 
-ReactDOM.render(<Switch defaultChecked onChange={onChange} />, mountNode);
+export default () => <Switch defaultChecked onChange={onChange} />;
 ```
 
 <style>
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index 8722bb5662..af04d0729b 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -34,5 +34,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/switch/demo/loading.md b/components/switch/demo/loading.md
index 40eefcae1d..c5757e4702 100644
--- a/components/switch/demo/loading.md
+++ b/components/switch/demo/loading.md
@@ -16,12 +16,11 @@ Mark a pending state of switch.
 ```jsx
 import { Switch } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Switch loading defaultChecked />
     <br />
     <Switch size="small" loading />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md
index 5ce89b7f63..2a8268c247 100644
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@@ -16,12 +16,11 @@ title:
 ```jsx
 import { Switch } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Switch defaultChecked />
     <br />
     <Switch size="small" defaultChecked />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index f70bba48c2..e6424a7cf3 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -17,7 +17,7 @@ With text and icon.
 import { Switch } from 'antd';
 import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
     <br />
@@ -28,7 +28,6 @@ ReactDOM.render(
       unCheckedChildren={<CloseOutlined />}
       defaultChecked
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index aed6bb309e..e0c4707e0a 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -140,7 +140,7 @@ function InternalTable<RecordType extends object = any>(
   );
 
   const baseColumns = React.useMemo(
-    () => columns || convertChildrenToColumns(children),
+    () => columns || (convertChildrenToColumns(children) as ColumnsType<RecordType>),
     [columns, children],
   );
   const needResponsive = React.useMemo(
@@ -154,8 +154,7 @@ function InternalTable<RecordType extends object = any>(
     const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
 
     return baseColumns.filter(
-      (c: ColumnType<RecordType>) =>
-        !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
+      c => !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
     );
   }, [baseColumns, screens]);
 
@@ -501,7 +500,7 @@ function InternalTable<RecordType extends object = any>(
         {topPaginationNode}
         <RcTable<RecordType>
           {...tableProps}
-          columns={mergedColumns}
+          columns={mergedColumns as RcTableProps<RecordType>['columns']}
           direction={direction}
           expandable={mergedExpandable}
           prefixCls={prefixCls}
@@ -518,7 +517,7 @@ function InternalTable<RecordType extends object = any>(
           // Internal
           internalHooks={INTERNAL_HOOKS}
           internalRefs={internalRefs as any}
-          transformColumns={transformColumns}
+          transformColumns={transformColumns as RcTableProps<RecordType>['transformColumns']}
         />
         {bottomPaginationNode}
       </Spin>
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index cc358f86d4..1d4977d40b 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -2,6 +2,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Table from '..';
 import Input from '../../input';
 import Tooltip from '../../tooltip';
@@ -101,8 +103,8 @@ describe('Table.filter', () => {
   it('renders empty menu correctly', () => {
     jest.useFakeTimers();
 
-    jest.spyOn(console, 'error').mockImplementation(() => undefined);
-    const wrapper = mount(
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const { container } = render(
       createTable({
         columns: [
           {
@@ -112,17 +114,16 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+
     act(() => {
       jest.runAllTimers();
-      wrapper.update();
     });
 
-    expect(wrapper.find('Empty').length).toBeTruthy();
-    // eslint-disable-next-line no-console
-    expect(console.error).not.toHaveBeenCalled();
-    // eslint-disable-next-line no-console
-    console.error.mockRestore();
+    expect(container.querySelector('.ant-empty')).toBeTruthy();
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
 
     jest.useRealTimers();
   });
diff --git a/components/table/__tests__/Table.test.js b/components/table/__tests__/Table.test.js
index 299724a105..d3bbffcc7b 100644
--- a/components/table/__tests__/Table.test.js
+++ b/components/table/__tests__/Table.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Table from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -258,7 +260,7 @@ describe('Table', () => {
         dataIndex: 'name',
       },
     ];
-    mount(<Table columns={columns} rowKey={record => record.key} />);
+    render(<Table columns={columns} rowKey={record => record.key} />);
     expect(warnSpy).not.toBeCalled();
   });
 
@@ -275,7 +277,7 @@ describe('Table', () => {
       const ref = React.useRef();
       return <Table ref={ref} columns={columns} />;
     };
-    mount(<Wrapper />);
+    render(<Wrapper />);
     expect(warnSpy).not.toBeCalled();
   });
 });
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 8292952afa..206b4b1d87 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -116,5 +116,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md
index 387477415e..848cbfa3e1 100644
--- a/components/table/demo/basic.md
+++ b/components/table/demo/basic.md
@@ -89,5 +89,5 @@ const data = [
   },
 ];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} />;
 ```
diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md
index 30006a2087..7b486b718b 100644
--- a/components/table/demo/bordered.md
+++ b/components/table/demo/bordered.md
@@ -55,14 +55,13 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <Table
     columns={columns}
     dataSource={data}
     bordered
     title={() => 'Header'}
     footer={() => 'Footer'}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md
index 4b72a5fd0b..bf436c6ebf 100644
--- a/components/table/demo/colspan-rowspan.md
+++ b/components/table/demo/colspan-rowspan.md
@@ -116,5 +116,5 @@ const data = [
   },
 ];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, mountNode);
+export default () => <Table columns={columns} dataSource={data} bordered />;
 ```
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index 68d98d38cc..c4272d91bd 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -9,17 +9,13 @@ title:
 
 通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。
 
-给函数 `clearFilters` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。
-添加 `boolean` 类型参数 `confirm`，清除筛选时是否提交已选项，默认 `true`。
+给函数 `clearFilters` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。添加 `boolean` 类型参数 `confirm`，清除筛选时是否提交已选项，默认 `true`。
 
 ## en-US
 
 Implement a customized column search example via `filterDropdown`.
 
-Add the `boolean` type parameter `closeDropdown` to the function `clearFilters`. Whether to close the filter menu
-is `true` by default.
-Add the `boolean` type parameter `confirm` to clear whether to submit the option during filtering.
-The default is `true`.
+Add the `boolean` type parameter `closeDropdown` to the function `clearFilters`. Whether to close the filter menu is `true` by default. Add the `boolean` type parameter `confirm` to clear whether to submit the option during filtering. The default is `true`.
 
 ```jsx
 import { Table, Input, Button, Space } from 'antd';
@@ -166,5 +162,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/table/demo/drag-sorting-handler.md b/components/table/demo/drag-sorting-handler.md
index 31e715b104..61686d39ea 100644
--- a/components/table/demo/drag-sorting-handler.md
+++ b/components/table/demo/drag-sorting-handler.md
@@ -124,7 +124,7 @@ class SortableTable extends React.Component {
   }
 }
 
-ReactDOM.render(<SortableTable />, mountNode);
+export default () => <SortableTable />;
 ```
 
 ```css
diff --git a/components/table/demo/drag-sorting.md b/components/table/demo/drag-sorting.md
index 2dc2734c8d..a393aa06e2 100644
--- a/components/table/demo/drag-sorting.md
+++ b/components/table/demo/drag-sorting.md
@@ -135,7 +135,7 @@ const DragSortingTable: React.FC = () => {
   );
 };
 
-ReactDOM.render(<DragSortingTable />, mountNode);
+export default () => <DragSortingTable />;
 ```
 
 ```css
diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md
index d9e7e62125..7d2f5a7c72 100644
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@@ -253,7 +253,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md
index dac0a7ee8a..bd0efa942c 100644
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@@ -250,7 +250,7 @@ class EditableTable extends React.Component<EditableTableProps, EditableTableSta
   }
 }
 
-ReactDOM.render(<EditableTable />, mountNode);
+export default () => <EditableTable />;
 ```
 
 ```css
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index eacf65c0f3..ab1cfb1948 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -197,7 +197,7 @@ const EditableTable = () => {
   );
 };
 
-ReactDOM.render(<EditableTable />, mountNode);
+export default () => <EditableTable />;
 ```
 
 ```css
diff --git a/components/table/demo/ellipsis-custom-tooltip.md b/components/table/demo/ellipsis-custom-tooltip.md
index 2f838c8186..c095f688c0 100644
--- a/components/table/demo/ellipsis-custom-tooltip.md
+++ b/components/table/demo/ellipsis-custom-tooltip.md
@@ -105,5 +105,5 @@ const data = [
   },
 ];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} />;
 ```
diff --git a/components/table/demo/ellipsis.md b/components/table/demo/ellipsis.md
index b8f6b7ef7e..fe59cdb40d 100644
--- a/components/table/demo/ellipsis.md
+++ b/components/table/demo/ellipsis.md
@@ -84,5 +84,5 @@ const data = [
   },
 ];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} />;
 ```
diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md
index 0a035badd8..ba5cd416f3 100644
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@@ -59,7 +59,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <Table
     columns={columns}
     expandable={{
@@ -67,7 +67,6 @@ ReactDOM.render(
       rowExpandable: record => record.name !== 'Not Expandable',
     }}
     dataSource={data}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/table/demo/filter-in-tree.md b/components/table/demo/filter-in-tree.md
index 351607e9db..f607912f91 100644
--- a/components/table/demo/filter-in-tree.md
+++ b/components/table/demo/filter-in-tree.md
@@ -117,5 +117,5 @@ function onChange(pagination, filters, sorter, extra) {
   console.log('params', pagination, filters, sorter, extra);
 }
 
-ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
 ```
diff --git a/components/table/demo/filter-search.md b/components/table/demo/filter-search.md
index e144c554c3..8de6321aa2 100644
--- a/components/table/demo/filter-search.md
+++ b/components/table/demo/filter-search.md
@@ -59,7 +59,7 @@ const columns = [
       },
     ],
     onFilter: (value, record) => record.address.startsWith(value),
-    filterSearch:(input, record) => record.value.indexOf(input) > -1,
+    filterSearch: (input, record) => record.value.indexOf(input) > -1,
     width: '40%',
   },
 ];
@@ -95,5 +95,5 @@ function onChange(pagination, filters, sorter, extra) {
   console.log('params', pagination, filters, sorter, extra);
 }
 
-ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
 ```
diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md
index 4c74cff54b..11207395e6 100644
--- a/components/table/demo/fixed-columns-header.md
+++ b/components/table/demo/fixed-columns-header.md
@@ -101,8 +101,5 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-ReactDOM.render(
-  <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />,
-  mountNode,
-);
+export default () => <Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />;
 ```
diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md
index 06938592dc..eb336d1a02 100644
--- a/components/table/demo/fixed-columns.md
+++ b/components/table/demo/fixed-columns.md
@@ -75,5 +75,5 @@ const data = [
   },
 ];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
 ```
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
index beebe7e40d..2e625d4923 100644
--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@@ -47,8 +47,7 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-ReactDOM.render(
-  <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />,
-  mountNode,
+export default () => (
+  <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
 );
 ```
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
index 6d2a048a45..985087fae0 100644
--- a/components/table/demo/grouping-columns.md
+++ b/components/table/demo/grouping-columns.md
@@ -115,14 +115,13 @@ for (let i = 0; i < 100; i++) {
   });
 }
 
-ReactDOM.render(
+export default () => (
   <Table
     columns={columns}
     dataSource={data}
     bordered
     size="middle"
     scroll={{ x: 'calc(700px + 50%)', y: 240 }}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/table/demo/head.md b/components/table/demo/head.md
index 384fdf022d..d896fe0619 100644
--- a/components/table/demo/head.md
+++ b/components/table/demo/head.md
@@ -120,5 +120,5 @@ function onChange(pagination, filters, sorter, extra) {
   console.log('params', pagination, filters, sorter, extra);
 }
 
-ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
 ```
diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md
index 27112fe67e..dd6853b0f2 100644
--- a/components/table/demo/jsx.md
+++ b/components/table/demo/jsx.md
@@ -49,7 +49,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <Table dataSource={data}>
     <ColumnGroup title="Name">
       <Column title="First Name" dataIndex="firstName" key="firstName" />
@@ -81,7 +81,6 @@ ReactDOM.render(
         </Space>
       )}
     />
-  </Table>,
-  mountNode,
+  </Table>
 );
 ```
diff --git a/components/table/demo/multiple-sorter.md b/components/table/demo/multiple-sorter.md
index ad58804fbe..aeffb9f10a 100644
--- a/components/table/demo/multiple-sorter.md
+++ b/components/table/demo/multiple-sorter.md
@@ -82,5 +82,5 @@ function onChange(pagination, filters, sorter, extra) {
   console.log('params', pagination, filters, sorter, extra);
 }
 
-ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} onChange={onChange} />;
 ```
diff --git a/components/table/demo/narrow.md b/components/table/demo/narrow.md
index d713488d03..51c7b1a0fb 100644
--- a/components/table/demo/narrow.md
+++ b/components/table/demo/narrow.md
@@ -43,10 +43,9 @@ for (let i = 0; i < 200; i += 1) {
   });
 }
 
-ReactDOM.render(
+export default () => (
   <div style={{ width: 300 }}>
     <Table columns={columns} dataSource={data} size="small" pagination={{ defaultCurrent: 13 }} />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/table/demo/nest-table-border-debug.md b/components/table/demo/nest-table-border-debug.md
index fa29b9f95e..c21c74b5b6 100644
--- a/components/table/demo/nest-table-border-debug.md
+++ b/components/table/demo/nest-table-border-debug.md
@@ -118,5 +118,5 @@ function NestedTable() {
   );
 }
 
-ReactDOM.render(<NestedTable />, mountNode);
+export default () => <NestedTable />;
 ```
diff --git a/components/table/demo/nested-table.md b/components/table/demo/nested-table.md
index 94defb9d21..d48115c073 100644
--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@@ -98,5 +98,5 @@ function NestedTable() {
   );
 }
 
-ReactDOM.render(<NestedTable />, mountNode);
+export default () => <NestedTable />;
 ```
diff --git a/components/table/demo/order-column.md b/components/table/demo/order-column.md
index 40aefdccb7..f091153103 100644
--- a/components/table/demo/order-column.md
+++ b/components/table/demo/order-column.md
@@ -56,7 +56,7 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <Table
     columns={columns}
     rowSelection={{}}
@@ -64,7 +64,6 @@ ReactDOM.render(
       expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
     }}
     dataSource={data}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/table/demo/pagination.md b/components/table/demo/pagination.md
index a4a7605151..4c662c0730 100644
--- a/components/table/demo/pagination.md
+++ b/components/table/demo/pagination.md
@@ -140,5 +140,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md
index c0293a4014..13ff3b31cc 100644
--- a/components/table/demo/reset-filter.md
+++ b/components/table/demo/reset-filter.md
@@ -140,5 +140,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/table/demo/resizable-column.md b/components/table/demo/resizable-column.md
index 59f4051ce2..5eb1058452 100644
--- a/components/table/demo/resizable-column.md
+++ b/components/table/demo/resizable-column.md
@@ -107,16 +107,18 @@ class Demo extends React.Component {
     },
   ];
 
-  handleResize = index => (e, { size }) => {
-    this.setState(({ columns }) => {
-      const nextColumns = [...columns];
-      nextColumns[index] = {
-        ...nextColumns[index],
-        width: size.width,
-      };
-      return { columns: nextColumns };
-    });
-  };
+  handleResize =
+    index =>
+    (e, { size }) => {
+      this.setState(({ columns }) => {
+        const nextColumns = [...columns];
+        nextColumns[index] = {
+          ...nextColumns[index],
+          width: size.width,
+        };
+        return { columns: nextColumns };
+      });
+    };
 
   render() {
     const columns = this.state.columns.map((col, index) => ({
@@ -131,7 +133,7 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/table/demo/responsive.md b/components/table/demo/responsive.md
index 35a8433f06..42e91a61dc 100644
--- a/components/table/demo/responsive.md
+++ b/components/table/demo/responsive.md
@@ -46,5 +46,5 @@ const data = [
   },
 ];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
+export default () => <Table columns={columns} dataSource={data} />;
 ```
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index 72e1754c3b..3d1dfc0f30 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -86,5 +86,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/table/demo/row-selection-custom-debug.md b/components/table/demo/row-selection-custom-debug.md
index 82d212c1d6..20fdf4c998 100644
--- a/components/table/demo/row-selection-custom-debug.md
+++ b/components/table/demo/row-selection-custom-debug.md
@@ -46,5 +46,5 @@ const App = () => {
   return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md
index 490f353e9f..0ad1bccb4e 100644
--- a/components/table/demo/row-selection-custom.md
+++ b/components/table/demo/row-selection-custom.md
@@ -94,5 +94,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index 3d74756572..edf1ace950 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -111,5 +111,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/table/demo/size.md b/components/table/demo/size.md
index 3d8a2aa290..02336e2ea5 100644
--- a/components/table/demo/size.md
+++ b/components/table/demo/size.md
@@ -51,14 +51,13 @@ const data = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <div>
     <h4>Middle size table</h4>
     <Table columns={columns} dataSource={data} size="middle" />
     <h4>Small size table</h4>
     <Table columns={columns} dataSource={data} size="small" />
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/table/demo/sticky.md b/components/table/demo/sticky.md
index ff995811b2..714662e243 100644
--- a/components/table/demo/sticky.md
+++ b/components/table/demo/sticky.md
@@ -126,5 +126,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/table/demo/summary.md b/components/table/demo/summary.md
index f36723db08..de47e6f9d0 100644
--- a/components/table/demo/summary.md
+++ b/components/table/demo/summary.md
@@ -82,7 +82,7 @@ for (let i = 0; i < 20; i += 1) {
   });
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Table
       columns={columns}
@@ -137,8 +137,7 @@ ReactDOM.render(
         </Table.Summary>
       )}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/table/demo/tree-data.md b/components/table/demo/tree-data.md
index b99dbdf6ef..e11365a062 100644
--- a/components/table/demo/tree-data.md
+++ b/components/table/demo/tree-data.md
@@ -134,5 +134,5 @@ function TreeData() {
   );
 }
 
-ReactDOM.render(<TreeData />, mountNode);
+export default () => <TreeData />;
 ```
diff --git a/components/table/demo/virtual-list.md b/components/table/demo/virtual-list.md
index d4e8c0a415..c3723c7d1e 100644
--- a/components/table/demo/virtual-list.md
+++ b/components/table/demo/virtual-list.md
@@ -136,9 +136,8 @@ const columns = [
 
 const data = Array.from({ length: 100000 }, (_, key) => ({ key }));
 
-ReactDOM.render(
-  <VirtualTable columns={columns} dataSource={data} scroll={{ y: 300, x: '100vw' }} />,
-  mountNode,
+export default () => (
+  <VirtualTable columns={columns} dataSource={data} scroll={{ y: 300, x: '100vw' }} />
 );
 ```
 
diff --git a/components/table/interface.tsx b/components/table/interface.tsx
index 6bf17aab13..756c06f444 100644
--- a/components/table/interface.tsx
+++ b/components/table/interface.tsx
@@ -88,7 +88,7 @@ export interface FilterDropdownProps {
   visible: boolean;
 }
 
-export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
+export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, 'title'> {
   title?: ColumnTitle<RecordType>;
   // Sorter
   sorter?:
diff --git a/components/table/style/size.less b/components/table/style/size.less
index c80680a7cb..f05d269866 100644
--- a/components/table/style/size.less
+++ b/components/table/style/size.less
@@ -44,13 +44,3 @@
 // =                            Small                             =
 // ================================================================
 .table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm, @table-font-size-sm);
-
-.@{table-prefix-cls}-small {
-  .@{table-prefix-cls}-thead > tr > th {
-    background-color: @table-header-bg-sm;
-  }
-  .@{table-prefix-cls}-selection-column {
-    width: 46px;
-    min-width: 46px;
-  }
-}
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index ba07286225..5be629b968 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -945,8 +945,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
         style="transform:translate(0px, 0px)"
       >
         <div
-          class=""
-          style="margin-right:24px"
+          class="dragnode "
         >
           <div
             class="ant-tabs-tab ant-tabs-tab-active"
@@ -962,8 +961,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
           </div>
         </div>
         <div
-          class=""
-          style="margin-right:24px"
+          class="dragnode "
         >
           <div
             class="ant-tabs-tab"
@@ -979,8 +977,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
           </div>
         </div>
         <div
-          class=""
-          style="margin-right:24px"
+          class="dragnode "
         >
           <div
             class="ant-tabs-tab"
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 0b3a6273ae..8948380c37 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -831,8 +831,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
         style="transform:translate(0px, 0px)"
       >
         <div
-          class=""
-          style="margin-right:24px"
+          class="dragnode "
         >
           <div
             class="ant-tabs-tab ant-tabs-tab-active"
@@ -848,8 +847,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
           </div>
         </div>
         <div
-          class=""
-          style="margin-right:24px"
+          class="dragnode "
         >
           <div
             class="ant-tabs-tab"
@@ -865,8 +863,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
           </div>
         </div>
         <div
-          class=""
-          style="margin-right:24px"
+          class="dragnode "
         >
           <div
             class="ant-tabs-tab"
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 90d60856c5..9b4625f279 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -36,5 +36,5 @@ const Demo = () => (
   </Tabs>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index dd0a16b382..7a924699df 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -18,7 +18,7 @@ import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-ReactDOM.render(
+export default () => (
   <div className="card-container">
     <Tabs type="card">
       <TabPane tab="Tab Title 1" key="1">
@@ -37,8 +37,7 @@ ReactDOM.render(
         <p>Content of Tab Pane 3</p>
       </TabPane>
     </Tabs>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index 0416a8688d..9fc39d3860 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -22,7 +22,7 @@ function callback(key) {
   console.log(key);
 }
 
-ReactDOM.render(
+export default () => (
   <Tabs onChange={callback} type="card">
     <TabPane tab="Tab 1" key="1">
       Content of Tab Pane 1
@@ -33,7 +33,6 @@ ReactDOM.render(
     <TabPane tab="Tab 3" key="3">
       Content of Tab Pane 3
     </TabPane>
-  </Tabs>,
-  mountNode,
+  </Tabs>
 );
 ```
diff --git a/components/tabs/demo/centered.md b/components/tabs/demo/centered.md
index 67ff72e411..7ff654c47c 100644
--- a/components/tabs/demo/centered.md
+++ b/components/tabs/demo/centered.md
@@ -32,5 +32,5 @@ const Demo = () => (
   </Tabs>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index 3ebfa6fd22..a955f7dc3a 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -90,5 +90,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
index d82f1880d5..d3604877cb 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -50,7 +50,7 @@ const DraggableTabNode = ({ index, children, moveNode }) => {
   });
   drop(drag(ref));
   return (
-    <div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
+    <div ref={ref} className={`dragnode ${isOver ? dropClassName : ''}`}>
       {children}
     </div>
   );
@@ -131,7 +131,7 @@ class DraggableTabs extends React.Component {
   }
 }
 
-ReactDOM.render(
+export default () => (
   <DraggableTabs>
     <TabPane tab="tab 1" key="1">
       Content of Tab Pane 1
@@ -142,8 +142,7 @@ ReactDOM.render(
     <TabPane tab="tab 3" key="3">
       Content of Tab Pane 3
     </TabPane>
-  </DraggableTabs>,
-  mountNode,
+  </DraggableTabs>
 );
 ```
 
@@ -152,4 +151,8 @@ ReactDOM.render(
   background: #fefefe;
   transition: all 0.3s;
 }
+
+.dragnode {
+  margin-inline-end: 24px;
+}
 ```
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index 4c62070144..d541359e88 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -27,7 +27,7 @@ const renderTabBar = (props, DefaultTabBar) => (
   </Sticky>
 );
 
-ReactDOM.render(
+export default () => (
   <StickyContainer>
     <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
       <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
@@ -40,8 +40,7 @@ ReactDOM.render(
         Content of Tab Pane 3
       </TabPane>
     </Tabs>
-  </StickyContainer>,
-  mountNode,
+  </StickyContainer>
 );
 ```
 
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index 2b018435f3..4a137dcd04 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -18,7 +18,7 @@ import { Tabs } from 'antd';
 
 const { TabPane } = Tabs;
 
-ReactDOM.render(
+export default () => (
   <Tabs defaultActiveKey="1">
     <TabPane tab="Tab 1" key="1">
       Tab 1
@@ -29,7 +29,6 @@ ReactDOM.render(
     <TabPane tab="Tab 3" key="3">
       Tab 3
     </TabPane>
-  </Tabs>,
-  mountNode,
+  </Tabs>
 );
 ```
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 87e3ce3fe0..748c8fe1c7 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -98,5 +98,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index 40cae3982e..5a000c5a93 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -83,7 +83,7 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 ```css
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index 6f61a74f83..5a3f7c161c 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -19,7 +19,7 @@ import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
 
 const { TabPane } = Tabs;
 
-ReactDOM.render(
+export default () => (
   <Tabs defaultActiveKey="2">
     <TabPane
       tab={
@@ -43,7 +43,6 @@ ReactDOM.render(
     >
       Tab 2
     </TabPane>
-  </Tabs>,
-  mountNode,
+  </Tabs>
 );
 ```
diff --git a/components/tabs/demo/nest.md b/components/tabs/demo/nest.md
index 52d16b8fb1..adf8141613 100644
--- a/components/tabs/demo/nest.md
+++ b/components/tabs/demo/nest.md
@@ -109,5 +109,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index 60be5046a2..c6e684a2b3 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -56,5 +56,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
index fdcc53d049..3bba1ff9e0 100644
--- a/components/tabs/demo/size.md
+++ b/components/tabs/demo/size.md
@@ -61,5 +61,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index 0ee0eeff3f..5009fe4aa2 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -51,5 +51,5 @@ class SlidingTabsDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<SlidingTabsDemo />, mountNode);
+export default () => <SlidingTabsDemo />;
 ```
diff --git a/components/tag/demo/animation.md b/components/tag/demo/animation.md
index c50780a7b8..e9e4f6f511 100644
--- a/components/tag/demo/animation.md
+++ b/components/tag/demo/animation.md
@@ -122,7 +122,7 @@ class EditableTagGroup extends React.Component {
   }
 }
 
-ReactDOM.render(<EditableTagGroup />, mountNode);
+export default () => <EditableTagGroup />;
 ```
 
 ```css
diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
index 0c92c89d00..a7353e6353 100644
--- a/components/tag/demo/basic.md
+++ b/components/tag/demo/basic.md
@@ -25,7 +25,7 @@ function preventDefault(e) {
   console.log('Clicked! But prevent default.');
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <Tag>Tag 1</Tag>
     <Tag>
@@ -37,7 +37,6 @@ ReactDOM.render(
     <Tag closable onClose={preventDefault}>
       Prevent Default
     </Tag>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
index 17130e16de..073ba3cbc1 100644
--- a/components/tag/demo/checkable.md
+++ b/components/tag/demo/checkable.md
@@ -55,5 +55,5 @@ class HotTags extends React.Component {
   }
 }
 
-ReactDOM.render(<HotTags />, mountNode);
+export default () => <HotTags />;
 ```
diff --git a/components/tag/demo/colorful-inverse.md b/components/tag/demo/colorful-inverse.md
index 97eec78a17..8e8c5bc121 100644
--- a/components/tag/demo/colorful-inverse.md
+++ b/components/tag/demo/colorful-inverse.md
@@ -17,7 +17,7 @@ Internal inverse color tag
 ```jsx
 import { Tag, Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Presets Inverse</Divider>
     <div>
@@ -33,8 +33,7 @@ ReactDOM.render(
       <Tag color="geekblue-inverse">geekblue</Tag>
       <Tag color="purple-inverse">purple</Tag>
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index 828424e4bc..8d4d5643f0 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -16,7 +16,7 @@ We preset a series of colorful tag styles for use in different situations. You c
 ```jsx
 import { Tag, Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -39,8 +39,7 @@ ReactDOM.render(
       <Tag color="#87d068">#87d068</Tag>
       <Tag color="#108ee9">#108ee9</Tag>
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index 33fd8498be..685e6c9bfb 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -152,7 +152,7 @@ class EditableTagGroup extends React.Component {
   }
 }
 
-ReactDOM.render(<EditableTagGroup />, mountNode);
+export default () => <EditableTagGroup />;
 ```
 
 ```css
diff --git a/components/tag/demo/controlled.md b/components/tag/demo/controlled.md
index fb5afae373..7abacdc9c5 100644
--- a/components/tag/demo/controlled.md
+++ b/components/tag/demo/controlled.md
@@ -40,5 +40,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tag/demo/customize.md b/components/tag/demo/customize.md
index 9ba677c8a8..234987686e 100644
--- a/components/tag/demo/customize.md
+++ b/components/tag/demo/customize.md
@@ -18,7 +18,7 @@ The close icon can be customized using `closeIcon`.
 import { Tag } from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Tag closable closeIcon="关 闭">
       Tag1
@@ -26,7 +26,6 @@ ReactDOM.render(
     <Tag closable closeIcon={<CloseCircleOutlined />}>
       Tag2
     </Tag>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/tag/demo/icon.md b/components/tag/demo/icon.md
index e8149354dd..774f8d610c 100644
--- a/components/tag/demo/icon.md
+++ b/components/tag/demo/icon.md
@@ -26,7 +26,7 @@ import {
   LinkedinOutlined,
 } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Tag icon={<TwitterOutlined />} color="#55acee">
       Twitter
@@ -40,7 +40,6 @@ ReactDOM.render(
     <Tag icon={<LinkedinOutlined />} color="#55acee">
       LinkedIn
     </Tag>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/tag/demo/status.md b/components/tag/demo/status.md
index 3bf5891925..f6fb298b63 100644
--- a/components/tag/demo/status.md
+++ b/components/tag/demo/status.md
@@ -24,7 +24,7 @@ import {
   MinusCircleOutlined,
 } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Without icon</Divider>
     <div>
@@ -55,7 +55,6 @@ ReactDOM.render(
         stop
       </Tag>
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md
index 69f514f5e4..807c598372 100644
--- a/components/time-picker/demo/12hours.md
+++ b/components/time-picker/demo/12hours.md
@@ -20,12 +20,11 @@ function onChange(time, timeString) {
   console.log(time, timeString);
 }
 
-ReactDOM.render(
+export default () => (
   <>
     <TimePicker use12Hours onChange={onChange} />
     <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
     <TimePicker use12Hours format="h:mm a" onChange={onChange} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md
index 599ff66eb4..30e98d13a2 100644
--- a/components/time-picker/demo/addon.md
+++ b/components/time-picker/demo/addon.md
@@ -40,5 +40,5 @@ class TimePickerAddonDemo extends React.Component {
   }
 }
 
-ReactDOM.render(<TimePickerAddonDemo />, mountNode);
+export default () => <TimePickerAddonDemo />;
 ```
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
index d4e8b54ed1..2a8da1f9a7 100644
--- a/components/time-picker/demo/basic.md
+++ b/components/time-picker/demo/basic.md
@@ -21,8 +21,7 @@ function onChange(time, timeString) {
   console.log(time, timeString);
 }
 
-ReactDOM.render(
-  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
-  mountNode,
+export default () => (
+  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
 );
 ```
diff --git a/components/time-picker/demo/bordered.md b/components/time-picker/demo/bordered.md
index e32492f488..c51c4b4a8e 100644
--- a/components/time-picker/demo/bordered.md
+++ b/components/time-picker/demo/bordered.md
@@ -18,11 +18,10 @@ import { TimePicker } from 'antd';
 
 const { RangePicker } = TimePicker;
 
-ReactDOM.render(
+export default () => (
   <>
     <TimePicker bordered={false} />
     <RangePicker bordered={false} />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/time-picker/demo/colored-popup.md b/components/time-picker/demo/colored-popup.md
index 836a9346ac..d97c3cee26 100644
--- a/components/time-picker/demo/colored-popup.md
+++ b/components/time-picker/demo/colored-popup.md
@@ -22,13 +22,12 @@ const onChange = (time, timeString) => {
   console.log(time, timeString);
 };
 
-ReactDOM.render(
+export default () => (
   <TimePicker
     onChange={onChange}
     defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
     popupClassName="myCustomClassName"
-  />,
-  mountNode,
+  />
 );
 ```
 
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
index a66ffccfbc..817579af6c 100644
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@@ -17,5 +17,5 @@ A disabled state of the `TimePicker`.
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-ReactDOM.render(<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, mountNode);
+export default () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;
 ```
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
index 793cac85aa..dc29f5b659 100644
--- a/components/time-picker/demo/hide-column.md
+++ b/components/time-picker/demo/hide-column.md
@@ -19,5 +19,5 @@ import moment from 'moment';
 
 const format = 'HH:mm';
 
-ReactDOM.render(<TimePicker defaultValue={moment('12:08', format)} format={format} />, mountNode);
+export default () => <TimePicker defaultValue={moment('12:08', format)} format={format} />;
 ```
diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md
index 68ee5329da..9fda91e959 100644
--- a/components/time-picker/demo/interval-options.md
+++ b/components/time-picker/demo/interval-options.md
@@ -16,5 +16,5 @@ Show stepped options by `hourStep` `minuteStep` `secondStep`.
 ```jsx
 import { TimePicker } from 'antd';
 
-ReactDOM.render(<TimePicker minuteStep={15} secondStep={10} />, mountNode);
+export default () => <TimePicker minuteStep={15} secondStep={10} />;
 ```
diff --git a/components/time-picker/demo/range-picker.md b/components/time-picker/demo/range-picker.md
index 5e45e15678..7d1a188925 100644
--- a/components/time-picker/demo/range-picker.md
+++ b/components/time-picker/demo/range-picker.md
@@ -16,5 +16,5 @@ Use time range picker with `TimePicker.RangePicker`.
 ```jsx
 import { TimePicker } from 'antd';
 
-ReactDOM.render(<TimePicker.RangePicker />, mountNode);
+export default () => <TimePicker.RangePicker />;
 ```
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
index f7f9f613be..34d1c98987 100644
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@@ -17,12 +17,11 @@ The input box comes in three sizes. large is used in the form, while the medium
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-ReactDOM.render(
+export default () => (
   <>
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/time-picker/demo/status.md b/components/time-picker/demo/status.md
index ca6dd09e57..a30d164dc4 100644
--- a/components/time-picker/demo/status.md
+++ b/components/time-picker/demo/status.md
@@ -26,5 +26,5 @@ const Status: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<Status />, mountNode);
+export default () => <Status />;
 ```
diff --git a/components/time-picker/demo/suffix.md b/components/time-picker/demo/suffix.md
index 4b1bafd3f6..ca226c4ddc 100644
--- a/components/time-picker/demo/suffix.md
+++ b/components/time-picker/demo/suffix.md
@@ -23,12 +23,11 @@ function onChange(time, timeString) {
   console.log(time, timeString);
 }
 
-ReactDOM.render(
+export default () => (
   <TimePicker
     suffixIcon={<SmileOutlined />}
     onChange={onChange}
     defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
index a140eaf272..e8540278fb 100644
--- a/components/time-picker/demo/value.md
+++ b/components/time-picker/demo/value.md
@@ -27,5 +27,5 @@ const Demo = () => {
   return <TimePicker value={value} onChange={onChange} />;
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index 4cfc617feb..e72913f486 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -15,6 +15,7 @@ export interface TimelineProps {
   style?: React.CSSProperties;
   reverse?: boolean;
   mode?: 'left' | 'alternate' | 'right';
+  children?: React.ReactNode;
 }
 
 interface TimelineType extends React.FC<TimelineProps> {
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index de1e169cd1..8c082054f7 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -11,9 +11,10 @@ export interface TimelineItemProps {
   position?: string;
   style?: React.CSSProperties;
   label?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
-// for compatibililty
+// for compatibility
 // https://github.com/ant-design/ant-design/pull/26832
 export interface TimeLineItemProps extends TimelineItemProps {
   __deprecated_do_not_use_it__?: any; // eslint-disable-line camelcase
diff --git a/components/timeline/demo/alternate.md b/components/timeline/demo/alternate.md
index 0b16050f73..15412710a9 100644
--- a/components/timeline/demo/alternate.md
+++ b/components/timeline/demo/alternate.md
@@ -17,7 +17,7 @@ Alternate timeline.
 import { Timeline } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Timeline mode="alternate">
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
@@ -31,7 +31,6 @@ ReactDOM.render(
     <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
       Technical testing 2015-09-01
     </Timeline.Item>
-  </Timeline>,
-  mountNode,
+  </Timeline>
 );
 ```
diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
index a3b2026290..9f490c911d 100644
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@@ -16,13 +16,12 @@ Basic timeline.
 ```jsx
 import { Timeline } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Timeline>
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
     <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
-  </Timeline>,
-  mountNode,
+  </Timeline>
 );
 ```
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index 8796b1a72f..06b56f6219 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -17,7 +17,7 @@ Set the color of circles. `green` means completed or success status, `red` means
 import { Timeline } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Timeline>
     <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
@@ -44,7 +44,6 @@ ReactDOM.render(
     <Timeline.Item color="#00CCFF" dot={<SmileOutlined />}>
       <p>Custom color testing</p>
     </Timeline.Item>
-  </Timeline>,
-  mountNode,
+  </Timeline>
 );
 ```
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
index af06998014..4ca3c2c921 100644
--- a/components/timeline/demo/custom.md
+++ b/components/timeline/demo/custom.md
@@ -17,7 +17,7 @@ Set a node as an icon or other custom element.
 import { Timeline } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Timeline>
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
@@ -25,8 +25,7 @@ ReactDOM.render(
       Technical testing 2015-09-01
     </Timeline.Item>
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
-  </Timeline>,
-  mountNode,
+  </Timeline>
 );
 ```
 
diff --git a/components/timeline/demo/label.md b/components/timeline/demo/label.md
index 6577b3fc04..53319ef7e1 100644
--- a/components/timeline/demo/label.md
+++ b/components/timeline/demo/label.md
@@ -47,5 +47,5 @@ function TimelimeLabelDemo() {
   );
 }
 
-ReactDOM.render(<TimelimeLabelDemo />, mountNode);
+export default () => <TimelimeLabelDemo />;
 ```
diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md
index b54b444096..7151d54f20 100644
--- a/components/timeline/demo/pending.md
+++ b/components/timeline/demo/pending.md
@@ -41,5 +41,5 @@ class PendingTimeLine extends React.Component {
   }
 }
 
-ReactDOM.render(<PendingTimeLine />, mountNode);
+export default () => <PendingTimeLine />;
 ```
diff --git a/components/timeline/demo/right.md b/components/timeline/demo/right.md
index a671b49138..4360661ae4 100644
--- a/components/timeline/demo/right.md
+++ b/components/timeline/demo/right.md
@@ -17,7 +17,7 @@ Right alternate timeline.
 import { Timeline } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Timeline mode="right">
     <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
@@ -25,7 +25,6 @@ ReactDOM.render(
       Technical testing 2015-09-01
     </Timeline.Item>
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
-  </Timeline>,
-  mountNode,
+  </Timeline>
 );
 ```
diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md
index b6077afbe5..67c077506c 100644
--- a/components/tooltip/demo/arrow-point-at-center.md
+++ b/components/tooltip/demo/arrow-point-at-center.md
@@ -16,7 +16,7 @@ By specifying `arrowPointAtCenter` prop, the arrow will point to the center of t
 ```jsx
 import { Tooltip, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Tooltip placement="topLeft" title="Prompt Text">
       <Button>Align edge / 边缘对齐</Button>
@@ -24,7 +24,6 @@ ReactDOM.render(
     <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
       <Button>Arrow points to center / 箭头指向中心</Button>
     </Tooltip>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/tooltip/demo/auto-adjust-overflow.md b/components/tooltip/demo/auto-adjust-overflow.md
index 6bd26e9999..6114dc13df 100644
--- a/components/tooltip/demo/auto-adjust-overflow.md
+++ b/components/tooltip/demo/auto-adjust-overflow.md
@@ -24,7 +24,7 @@ const wrapStyles = {
   border: '1px solid #e9e9e9',
 };
 
-ReactDOM.render(
+export default () => (
   <div style={wrapStyles}>
     <Tooltip
       placement="left"
@@ -42,7 +42,6 @@ ReactDOM.render(
     >
       <Button>Ignore / 不处理</Button>
     </Tooltip>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md
index f4fedbb2f1..d38d7d970f 100644
--- a/components/tooltip/demo/basic.md
+++ b/components/tooltip/demo/basic.md
@@ -16,10 +16,9 @@ The simplest usage.
 ```jsx
 import { Tooltip } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Tooltip title="prompt text">
     <span>Tooltip will show on mouse enter.</span>
-  </Tooltip>,
-  mountNode,
+  </Tooltip>
 );
 ```
diff --git a/components/tooltip/demo/colorful.md b/components/tooltip/demo/colorful.md
index 593a960715..ee1ad02713 100644
--- a/components/tooltip/demo/colorful.md
+++ b/components/tooltip/demo/colorful.md
@@ -33,7 +33,7 @@ const colors = [
 ];
 const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -51,8 +51,7 @@ ReactDOM.render(
         </Tooltip>
       ))}
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/tooltip/demo/destroy-tooltip-on-hide.md b/components/tooltip/demo/destroy-tooltip-on-hide.md
index 283d70f3c7..4d1bdb7afc 100644
--- a/components/tooltip/demo/destroy-tooltip-on-hide.md
+++ b/components/tooltip/demo/destroy-tooltip-on-hide.md
@@ -17,10 +17,9 @@ Setting `destroyTooltipOnHide` to control whether destroy dom node of tooltip wh
 ```jsx
 import { Tooltip } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Tooltip destroyTooltipOnHide={{ keepParent: false }} title="prompt text">
     <span>Tooltip will destroy when hidden.</span>
-  </Tooltip>,
-  mountNode,
+  </Tooltip>
 );
 ```
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index 386b081814..d201b41a6c 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -20,7 +20,7 @@ const text = <span>prompt text</span>;
 
 const buttonWidth = 70;
 
-ReactDOM.render(
+export default () => (
   <div className="demo">
     <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
       <Tooltip placement="topLeft" title={text}>
@@ -66,8 +66,7 @@ ReactDOM.render(
         <Button>BR</Button>
       </Tooltip>
     </div>
-  </div>,
-  mountNode,
+  </div>
 );
 ```
 
diff --git a/components/transfer/__tests__/__snapshots__/list.test.js.snap b/components/transfer/__tests__/__snapshots__/list.test.js.snap
index d2020f87a7..89d853203b 100644
--- a/components/transfer/__tests__/__snapshots__/list.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/list.test.js.snap
@@ -14,6 +14,7 @@ exports[`Transfer.List should render correctly 1`] = `
         class="ant-checkbox ant-checkbox-indeterminate"
       >
         <input
+          aria-checked="mixed"
           class="ant-checkbox-input"
           type="checkbox"
           value=""
diff --git a/components/transfer/__tests__/customize.test.js b/components/transfer/__tests__/customize.test.js
index 84c567c15f..9369d408b2 100644
--- a/components/transfer/__tests__/customize.test.js
+++ b/components/transfer/__tests__/customize.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Transfer from '../index';
 
 describe('Transfer.Customize', () => {
@@ -15,9 +17,9 @@ describe('Transfer.Customize', () => {
 
   it('props#body does not work anymore', () => {
     const body = jest.fn();
-    mount(<Transfer body={body} />);
+    render(<Transfer body={body} />);
 
-    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(errorSpy).not.toHaveBeenCalled();
     expect(body).not.toHaveBeenCalled();
   });
 
diff --git a/components/transfer/__tests__/search.test.js b/components/transfer/__tests__/search.test.js
index 9e1224ac94..25e04c6f28 100644
--- a/components/transfer/__tests__/search.test.js
+++ b/components/transfer/__tests__/search.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Search from '../search';
 import Transfer from '../index';
 
@@ -66,14 +68,14 @@ describe('Transfer.Search', () => {
 
   it('legacy props#onSearchChange doesnot work anymore', () => {
     const onSearchChange = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Transfer render={item => item.title} onSearchChange={onSearchChange} showSearch />,
     );
-    wrapper
-      .find('.ant-input')
-      .at(0)
-      .simulate('change', { target: { value: 'a' } });
-    expect(errorSpy.mock.calls.length).toBe(0);
+
+    fireEvent.change(container.querySelector('.ant-input'), {
+      target: { value: 'a' },
+    });
+    expect(errorSpy).not.toHaveBeenCalled();
     expect(onSearchChange).not.toHaveBeenCalled();
   });
 
diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index f80dc3e5a8..322445c435 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -84,5 +84,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index 36cda28587..89b6215223 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -63,5 +63,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index d6603f462f..cf153f624d 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -78,5 +78,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/custom-select-all-labels.md b/components/transfer/demo/custom-select-all-labels.md
index 4c7c1754e3..798fe8e1bc 100644
--- a/components/transfer/demo/custom-select-all-labels.md
+++ b/components/transfer/demo/custom-select-all-labels.md
@@ -47,5 +47,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md
index 0eea898b81..44199c8707 100644
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@@ -67,5 +67,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/oneWay.md b/components/transfer/demo/oneWay.md
index d227ff9985..95ef468cae 100644
--- a/components/transfer/demo/oneWay.md
+++ b/components/transfer/demo/oneWay.md
@@ -87,5 +87,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index 7a52a2b2cb..eaa2e54538 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -69,5 +69,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/transfer/demo/status.md b/components/transfer/demo/status.md
index fc9a994f3b..ff3483edcf 100644
--- a/components/transfer/demo/status.md
+++ b/components/transfer/demo/status.md
@@ -25,5 +25,5 @@ const Status = () => (
   </Space>
 );
 
-ReactDOM.render(<Status />, mountNode);
+export default () => <Status />;
 ```
diff --git a/components/transfer/demo/table-transfer.md b/components/transfer/demo/table-transfer.md
index c701ee0edb..7b038443c3 100644
--- a/components/transfer/demo/table-transfer.md
+++ b/components/transfer/demo/table-transfer.md
@@ -157,7 +157,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 ```css
diff --git a/components/transfer/demo/tree-transfer.md b/components/transfer/demo/tree-transfer.md
index a5aae31f99..e3e98c2fe6 100644
--- a/components/transfer/demo/tree-transfer.md
+++ b/components/transfer/demo/tree-transfer.md
@@ -92,7 +92,7 @@ const App = () => {
   return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
 
 <style>
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index 6d0c5377db..5469f27e0e 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -20,8 +20,8 @@ import { isValidElement } from '../_util/reactNode';
 
 const defaultRender = () => null;
 
-function isRenderResultPlainObject(result: RenderResult) {
-  return (
+function isRenderResultPlainObject(result: RenderResult): result is RenderResultObject {
+  return !!(
     result &&
     !isValidElement(result) &&
     Object.prototype.toString.call(result) === '[object Object]'
@@ -274,7 +274,7 @@ export default class TransferList<
 
   renderItem = (item: RecordType): RenderedItem<RecordType> => {
     const { render = defaultRender } = this.props;
-    const renderResult: RenderResult = render(item);
+    const renderResult = render(item);
     const isRenderResultPlain = isRenderResultPlainObject(renderResult);
     return {
       renderedText: isRenderResultPlain
diff --git a/components/tree-select/demo/async.md b/components/tree-select/demo/async.md
index c11bf63c27..c613dcf213 100644
--- a/components/tree-select/demo/async.md
+++ b/components/tree-select/demo/async.md
@@ -73,5 +73,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
index 7b49b25ba5..9087d66e7d 100644
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@@ -48,5 +48,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
index 8e37ce3cd6..0844802903 100644
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@@ -81,5 +81,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/multiple.md b/components/tree-select/demo/multiple.md
index 149183a724..c267ba8cb9 100644
--- a/components/tree-select/demo/multiple.md
+++ b/components/tree-select/demo/multiple.md
@@ -55,5 +55,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/placement.md b/components/tree-select/demo/placement.md
index a4cc32249c..6c3d148ea9 100644
--- a/components/tree-select/demo/placement.md
+++ b/components/tree-select/demo/placement.md
@@ -60,5 +60,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/status.md b/components/tree-select/demo/status.md
index 334a589208..ec6efdfb8d 100644
--- a/components/tree-select/demo/status.md
+++ b/components/tree-select/demo/status.md
@@ -29,5 +29,5 @@ const Status: React.FC = () => (
   </Space>
 );
 
-ReactDOM.render(<Status />, mountNode);
+export default () => <Status />;
 ```
diff --git a/components/tree-select/demo/suffix.md b/components/tree-select/demo/suffix.md
index 5ec89e5f77..b6cc18ff0a 100644
--- a/components/tree-select/demo/suffix.md
+++ b/components/tree-select/demo/suffix.md
@@ -58,5 +58,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md
index b5e2ad3007..8c7eb48275 100644
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@@ -62,5 +62,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree-select/demo/treeLine.md b/components/tree-select/demo/treeLine.md
index dfbf7dac6f..f20bae8d38 100644
--- a/components/tree-select/demo/treeLine.md
+++ b/components/tree-select/demo/treeLine.md
@@ -52,5 +52,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index 28cd949d0b..fb6071f754 100644
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@@ -98,8 +98,6 @@ interface DraggableConfig {
   nodeDraggable?: DraggableFn;
 }
 
-export type SwitcherIcon = ((expanded: boolean) => React.ReactNode) | React.ReactNode;
-
 export interface TreeProps<T extends BasicDataNode = DataNode>
   extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable'> {
   showLine?: boolean | { showLeafIcon: boolean };
diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md
index ad830b9b0e..127aa2305b 100644
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@@ -100,5 +100,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
index 67f2d77a8b..f76a06c12e 100644
--- a/components/tree/demo/basic.md
+++ b/components/tree/demo/basic.md
@@ -68,5 +68,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/big-data.md b/components/tree/demo/big-data.md
index e42fdd7145..eb9785cb64 100644
--- a/components/tree/demo/big-data.md
+++ b/components/tree/demo/big-data.md
@@ -38,5 +38,5 @@ for (let i = 0; i < 100; i += 1) {
 
 const Demo = () => <Tree defaultExpandAll height={400} treeData={treeData} />;
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
index 4318bbc70e..193ba37084 100644
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@@ -43,14 +43,13 @@ const treeData = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <Tree
     showIcon
     defaultExpandAll
     defaultSelectedKeys={['0-0-0']}
     switcherIcon={<DownOutlined />}
     treeData={treeData}
-  />,
-  mountNode,
+  />
 );
 ```
diff --git a/components/tree/demo/directory.md b/components/tree/demo/directory.md
index 326aafe94c..279e6d2e7c 100644
--- a/components/tree/demo/directory.md
+++ b/components/tree/demo/directory.md
@@ -57,5 +57,5 @@ const Demo: React.FC<{}> = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/drag-debug.md b/components/tree/demo/drag-debug.md
index df36136063..c29b14c30b 100644
--- a/components/tree/demo/drag-debug.md
+++ b/components/tree/demo/drag-debug.md
@@ -181,5 +181,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index a764e8f791..0cc9389191 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -137,5 +137,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
index 683237ff07..b20c8a8d4d 100644
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@@ -73,5 +73,5 @@ const Demo: React.FC<{}> = () => {
   return <Tree loadData={onLoadData} treeData={treeData} />;
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md
index 38d7c293af..1f7d0e087f 100644
--- a/components/tree/demo/line.md
+++ b/components/tree/demo/line.md
@@ -123,5 +123,5 @@ const Demo: React.FC<{}> = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index 180e8cc483..c36efcb18a 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -145,7 +145,7 @@ class SearchTree extends React.Component {
   }
 }
 
-ReactDOM.render(<SearchTree />, mountNode);
+export default () => <SearchTree />;
 ```
 
 ```css
diff --git a/components/tree/demo/switcher-icon.md b/components/tree/demo/switcher-icon.md
index 5948724ea9..a9668b328b 100644
--- a/components/tree/demo/switcher-icon.md
+++ b/components/tree/demo/switcher-icon.md
@@ -84,5 +84,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/tree/demo/virtual-scroll.md b/components/tree/demo/virtual-scroll.md
index a997bf706c..dccca17411 100644
--- a/components/tree/demo/virtual-scroll.md
+++ b/components/tree/demo/virtual-scroll.md
@@ -36,5 +36,5 @@ function dig(path = '0', level = 3) {
 
 const treeData = dig();
 
-ReactDOM.render(<Tree treeData={treeData} height={233} defaultExpandAll />, mountNode);
+export default () => <Tree treeData={treeData} height={233} defaultExpandAll />;
 ```
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index 276e4c6b2c..9b5fb5b270 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -44,7 +44,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |  |
 | showIcon | 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 |  |
 | showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean} | false |  |
-| switcherIcon | Customize collapse/expand icon of tree node | ReactNode \|  ((expanded: boolean) => React.ReactNode) | - |  |
+| switcherIcon | Customize collapse/expand icon of tree node | ReactNode \| (({ expanded: boolean }) => React.ReactNode) | - | renderProps: 4.20.0 |
 | titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - |  |
 | virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index 0d114c198c..0b5c976cdc 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -45,7 +45,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | selectedKeys | （受控）设置选中的树节点 | string\[] | - |  |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
 | showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean} | false |  |
-| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode \|  ((expanded: boolean) => React.ReactNode) | - |  |
+| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode \| (({ expanded: boolean }) => React.ReactNode) | - | renderProps: 4.20.0 |
 | titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - |  |
 | virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
diff --git a/components/tree/utils/iconUtil.tsx b/components/tree/utils/iconUtil.tsx
index 2df42df143..2b062630b2 100644
--- a/components/tree/utils/iconUtil.tsx
+++ b/components/tree/utils/iconUtil.tsx
@@ -5,15 +5,17 @@ import FileOutlined from '@ant-design/icons/FileOutlined';
 import MinusSquareOutlined from '@ant-design/icons/MinusSquareOutlined';
 import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined';
 import CaretDownFilled from '@ant-design/icons/CaretDownFilled';
-import { AntTreeNodeProps, SwitcherIcon } from '../Tree';
+import { AntTreeNodeProps } from '../Tree';
 import { isValidElement, cloneElement } from '../../_util/reactNode';
 
 export default function renderSwitcherIcon(
   prefixCls: string,
-  switcherIcon: SwitcherIcon | undefined,
+  switcherIcon: React.ReactNode | ((props: any) => React.ReactNode),
   showLine: boolean | { showLeafIcon: boolean } | undefined,
-  { isLeaf, expanded, loading }: AntTreeNodeProps,
-) {
+  treeNodeProps: AntTreeNodeProps,
+): React.ReactNode {
+  const { isLeaf, expanded, loading } = treeNodeProps;
+
   if (loading) {
     return <LoadingOutlined className={`${prefixCls}-switcher-loading-icon`} />;
   }
@@ -30,12 +32,10 @@ export default function renderSwitcherIcon(
     }
     return null;
   }
+
   const switcherCls = `${prefixCls}-switcher-icon`;
 
-  let switcher = switcherIcon;
-  if (typeof switcher === 'function') {
-    switcher = switcher(Boolean(expanded));
-  }
+  const switcher = typeof switcherIcon === 'function' ? switcherIcon({ expanded }) : switcherIcon;
 
   if (isValidElement(switcher)) {
     return cloneElement(switcher, {
@@ -43,10 +43,6 @@ export default function renderSwitcherIcon(
     });
   }
 
-  if (switcher) {
-    return switcher;
-  }
-
   if (showLine) {
     return expanded ? (
       <MinusSquareOutlined className={`${prefixCls}-switcher-line-icon`} />
diff --git a/components/typography/Paragraph.tsx b/components/typography/Paragraph.tsx
index 7ed007e2e3..e9e18db5b2 100644
--- a/components/typography/Paragraph.tsx
+++ b/components/typography/Paragraph.tsx
@@ -5,6 +5,8 @@ export interface ParagraphProps extends BlockProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-const Paragraph: React.FC<ParagraphProps> = props => <Base {...props} component="div" />;
+const Paragraph: React.ForwardRefRenderFunction<HTMLDivElement, ParagraphProps> = (props, ref) => (
+  <Base ref={ref} {...props} component="div" />
+);
 
-export default Paragraph;
+export default React.forwardRef(Paragraph);
diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx
index f6ba85c03d..aca1fbe11f 100644
--- a/components/typography/Text.tsx
+++ b/components/typography/Text.tsx
@@ -8,7 +8,10 @@ export interface TextProps extends BlockProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
+const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
+  { ellipsis, ...restProps },
+  ref,
+) => {
   const mergedEllipsis = React.useMemo(() => {
     if (ellipsis && typeof ellipsis === 'object') {
       return omit(ellipsis as any, ['expandable', 'rows']);
@@ -25,7 +28,7 @@ const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
     '`ellipsis` do not support `expandable` or `rows` props.',
   );
 
-  return <Base {...restProps} ellipsis={mergedEllipsis} component="span" />;
+  return <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span" />;
 };
 
-export default Text;
+export default React.forwardRef(Text);
diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx
index 9ba9cd5643..c8f10f38f8 100644
--- a/components/typography/Title.tsx
+++ b/components/typography/Title.tsx
@@ -13,7 +13,7 @@ export type TitleProps = Omit<
   'strong'
 >;
 
-const Title: React.FC<TitleProps> = props => {
+const Title: React.ForwardRefRenderFunction<HTMLHeadingElement, TitleProps> = (props, ref) => {
   const { level = 1, ...restProps } = props;
   let component: string;
 
@@ -28,7 +28,7 @@ const Title: React.FC<TitleProps> = props => {
     component = 'h1';
   }
 
-  return <Base {...restProps} component={component} />;
+  return <Base ref={ref} {...restProps} component={component} />;
 };
 
-export default Title;
+export default React.forwardRef(Title);
diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
index 62fa4fc231..6d7fd19ee2 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { SmileOutlined, LikeOutlined, HighlightOutlined, CheckOutlined } from '@ant-design/icons';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -398,8 +400,29 @@ describe('Typography', () => {
 
   it('no italic warning', () => {
     resetWarned();
-    mount(<Text italic>Little</Text>);
+    render(<Text italic>Little</Text>);
 
     expect(errorSpy).not.toHaveBeenCalled();
   });
+
+  it('should get HTMLHeadingElement ref from Title', () => {
+    const ref = React.createRef();
+
+    mount(<Title level={1} ref={ref} />);
+    expect(ref.current instanceof HTMLHeadingElement).toBe(true);
+  });
+
+  it('should get HTMLDivElement ref from Paragraph', () => {
+    const ref = React.createRef();
+
+    mount(<Paragraph ref={ref} />);
+    expect(ref.current instanceof HTMLDivElement).toBe(true);
+  });
+
+  it('should get HTMLSpanElement ref from Text', () => {
+    const ref = React.createRef();
+
+    mount(<Text ref={ref} />);
+    expect(ref.current instanceof HTMLSpanElement).toBe(true);
+  });
 });
diff --git a/components/typography/demo/basic.md b/components/typography/demo/basic.md
index db0ac7d6d4..294f46b42a 100644
--- a/components/typography/demo/basic.md
+++ b/components/typography/demo/basic.md
@@ -21,7 +21,7 @@ const { Title, Paragraph, Text, Link } = Typography;
 const blockContent = `AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;
 
-ReactDOM.render(
+export default () => (
   <Typography>
     <Title>Introduction</Title>
     <Paragraph>
@@ -31,10 +31,13 @@ ReactDOM.render(
     </Paragraph>
     <Paragraph>
       After massive project practice and summaries, Ant Design, a design language for background
-      applications, is refined by Ant UED Team, which aims to <Text strong>
+      applications, is refined by Ant UED Team, which aims to{' '}
+      <Text strong>
         uniform the user interface specs for internal background projects, lower the unnecessary
         cost of design differences and implementation and liberate the resources of design and
-        front-end development</Text>.
+        front-end development
+      </Text>
+      .
     </Paragraph>
     <Title level={2}>Guidelines and Resources</Title>
     <Paragraph>
@@ -101,7 +104,6 @@ ReactDOM.render(
     <Paragraph>
       按<Text keyboard>Esc</Text>键退出阅读……
     </Paragraph>
-  </Typography>,
-  mountNode,
+  </Typography>
 );
 ```
diff --git a/components/typography/demo/ellipsis-debug.md b/components/typography/demo/ellipsis-debug.md
index 4085ce74e4..3b0a2b5d1b 100644
--- a/components/typography/demo/ellipsis-debug.md
+++ b/components/typography/demo/ellipsis-debug.md
@@ -76,5 +76,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/typography/demo/ellipsis-middle.md b/components/typography/demo/ellipsis-middle.md
index f1d8f927b5..2d855df3de 100644
--- a/components/typography/demo/ellipsis-middle.md
+++ b/components/typography/demo/ellipsis-middle.md
@@ -28,12 +28,11 @@ const EllipsisMiddle = ({ suffixCount, children }) => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <EllipsisMiddle suffixCount={12}>
     In the process of internal desktop applications development, many different design specs and
     implementations would be involved, which might cause designers and developers difficulties and
     duplication and reduce the efficiency of development.
-  </EllipsisMiddle>,
-  mountNode,
+  </EllipsisMiddle>
 );
 ```
diff --git a/components/typography/demo/ellipsis.md b/components/typography/demo/ellipsis.md
index f30bfde1d9..aee3fc4746 100644
--- a/components/typography/demo/ellipsis.md
+++ b/components/typography/demo/ellipsis.md
@@ -58,5 +58,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md
index 818b3b0efe..80bb4b4cfa 100644
--- a/components/typography/demo/interactive.md
+++ b/components/typography/demo/interactive.md
@@ -150,5 +150,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/typography/demo/paragraph-debug.md b/components/typography/demo/paragraph-debug.md
index 77b0b93d61..deab315458 100644
--- a/components/typography/demo/paragraph-debug.md
+++ b/components/typography/demo/paragraph-debug.md
@@ -19,7 +19,7 @@ import { Typography } from 'antd';
 
 const { Title, Paragraph, Text } = Typography;
 
-ReactDOM.render(
+export default () => (
   <>
     <Title>Introduction</Title>
     <Paragraph>
@@ -110,7 +110,6 @@ ReactDOM.render(
         </li>
       </ol>
     </Paragraph>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/typography/demo/suffix.md b/components/typography/demo/suffix.md
index 82320cec04..075c1868dc 100644
--- a/components/typography/demo/suffix.md
+++ b/components/typography/demo/suffix.md
@@ -52,5 +52,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/typography/demo/text.md b/components/typography/demo/text.md
index 4162341cbf..d9ca1e9674 100644
--- a/components/typography/demo/text.md
+++ b/components/typography/demo/text.md
@@ -18,7 +18,7 @@ import { Typography, Space } from 'antd';
 
 const { Text, Link } = Typography;
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Text>Ant Design (default)</Text>
     <Text type="secondary">Ant Design (secondary)</Text>
@@ -36,7 +36,6 @@ ReactDOM.render(
     <Link href="https://ant.design" target="_blank">
       Ant Design (Link)
     </Link>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/typography/demo/title.md b/components/typography/demo/title.md
index 7333b7fcc3..67c61c6395 100644
--- a/components/typography/demo/title.md
+++ b/components/typography/demo/title.md
@@ -18,14 +18,13 @@ import { Typography } from 'antd';
 
 const { Title } = Typography;
 
-ReactDOM.render(
+export default () => (
   <>
     <Title>h1. Ant Design</Title>
     <Title level={2}>h2. Ant Design</Title>
     <Title level={3}>h3. Ant Design</Title>
     <Title level={4}>h4. Ant Design</Title>
     <Title level={5}>h5. Ant Design</Title>
-  </>,
-  mountNode,
+  </>
 );
 ```
diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js
index 71865b951e..321c51fc85 100644
--- a/components/upload/__tests__/upload.test.js
+++ b/components/upload/__tests__/upload.test.js
@@ -1,6 +1,8 @@
 /* eslint-disable react/no-string-refs, react/prefer-es6-class */
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import produce from 'immer';
 import { cloneDeep } from 'lodash';
@@ -13,6 +15,8 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 describe('Upload', () => {
   mountTest(Upload);
   rtlTest(Upload);
@@ -296,7 +300,7 @@ describe('Upload', () => {
         url: 'http://www.baidu.com/xxx.png',
       },
     ];
-    render(<Upload fileList={fileList} />);
+    mount(<Upload fileList={fileList} />);
     fileList.forEach(file => {
       expect(file.uid).toBeDefined();
     });
@@ -851,19 +855,22 @@ describe('Upload', () => {
   // IE11 Does not support the File constructor
   it('should not break in IE if beforeUpload returns false', async () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Upload beforeUpload={() => false} fileList={[]} onChange={onChange} />);
+    const { container } = render(
+      <Upload beforeUpload={() => false} fileList={[]} onChange={onChange} />,
+    );
     const fileConstructor = () => {
       throw new TypeError("Object doesn't support this action");
     };
-    global.File = jest.fn().mockImplementationOnce(fileConstructor);
 
-    await act(async () =>
-      wrapper.find('input').simulate('change', {
-        target: {
-          files: [{ file: 'foo.png' }],
-        },
-      }),
-    );
+    jest.spyOn(global, 'File').mockImplementationOnce(fileConstructor);
+    fireEvent.change(container.querySelector('input'), {
+      target: {
+        files: [{ file: 'foo.png' }],
+      },
+    });
+
+    // React 18 is async now
+    await sleep();
 
     expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
   });
diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
index 2bb4baaf4b..62a6572438 100644
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@@ -84,7 +84,7 @@ class Avatar extends React.Component {
   }
 }
 
-ReactDOM.render(<Avatar />, mountNode);
+export default () => <Avatar />;
 ```
 
 ```css
diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index 650a92ef22..9098f45a51 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -35,10 +35,9 @@ const props = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Click to Upload</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/crop-image.md b/components/upload/demo/crop-image.md
index 13ebaa7772..51b1ad5a19 100644
--- a/components/upload/demo/crop-image.md
+++ b/components/upload/demo/crop-image.md
@@ -62,5 +62,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/upload/demo/customize-progress-bar.md b/components/upload/demo/customize-progress-bar.md
index 52f1474988..ad0b1e23b6 100644
--- a/components/upload/demo/customize-progress-bar.md
+++ b/components/upload/demo/customize-progress-bar.md
@@ -43,10 +43,9 @@ const props = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Click to Upload</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
index db43ab1d73..b02e85b956 100644
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@@ -48,10 +48,9 @@ const props = {
   ],
 };
 
-ReactDOM.render(
+export default () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/directory.md b/components/upload/demo/directory.md
index 661dec7dcc..ab9215dbaa 100644
--- a/components/upload/demo/directory.md
+++ b/components/upload/demo/directory.md
@@ -17,10 +17,9 @@ You can select and upload a whole directory.
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
     <Button icon={<UploadOutlined />}>Upload Directory</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/drag-sorting.md b/components/upload/demo/drag-sorting.md
index 1b04c73c36..335e49b7d2 100644
--- a/components/upload/demo/drag-sorting.md
+++ b/components/upload/demo/drag-sorting.md
@@ -135,7 +135,7 @@ const DragSortingUpload = () => {
   );
 };
 
-ReactDOM.render(<DragSortingUpload />, mountNode);
+export default () => <DragSortingUpload />;
 ```
 
 ```css
diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
index 16ddd987d5..a607835ac8 100644
--- a/components/upload/demo/drag.md
+++ b/components/upload/demo/drag.md
@@ -43,7 +43,7 @@ const props = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Dragger {...props}>
     <p className="ant-upload-drag-icon">
       <InboxOutlined />
@@ -53,7 +53,6 @@ ReactDOM.render(
       Support for a single or bulk upload. Strictly prohibit from uploading company data or other
       band files
     </p>
-  </Dragger>,
-  mountNode,
+  </Dragger>
 );
 ```
diff --git a/components/upload/demo/file-type.md b/components/upload/demo/file-type.md
index 4cae73ee9e..c5e4d13668 100644
--- a/components/upload/demo/file-type.md
+++ b/components/upload/demo/file-type.md
@@ -139,5 +139,5 @@ class PicturesWall extends React.Component {
   }
 }
 
-ReactDOM.render(<PicturesWall />, mountNode);
+export default () => <PicturesWall />;
 ```
diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
index 5f44ca254b..721f6e09c0 100644
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@@ -70,5 +70,5 @@ class MyUpload extends React.Component {
   }
 }
 
-ReactDOM.render(<MyUpload />, mountNode);
+export default () => <MyUpload />;
 ```
diff --git a/components/upload/demo/max-count.md b/components/upload/demo/max-count.md
index 5a284066fd..b4799fb7e0 100644
--- a/components/upload/demo/max-count.md
+++ b/components/upload/demo/max-count.md
@@ -17,7 +17,7 @@ Limit files with `maxCount`. Will replace current one when `maxCount` is `1`.
 import { Upload, Button, Space } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" style={{ width: '100%' }} size="large">
     <Upload
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@@ -34,7 +34,6 @@ ReactDOM.render(
     >
       <Button icon={<UploadOutlined />}>Upload (Max: 3)</Button>
     </Upload>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index 7f783543e4..4465eb596c 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -119,5 +119,5 @@ class PicturesWall extends React.Component {
   }
 }
 
-ReactDOM.render(<PicturesWall />, mountNode);
+export default () => <PicturesWall />;
 ```
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index 37c28bfadd..5169fd9c91 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -32,7 +32,7 @@ const fileList = [
   },
 ];
 
-ReactDOM.render(
+export default () => (
   <>
     <Upload
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@@ -51,8 +51,7 @@ ReactDOM.render(
     >
       <Button icon={<UploadOutlined />}>Upload</Button>
     </Upload>
-  </>,
-  mountNode,
+  </>
 );
 ```
 
diff --git a/components/upload/demo/preview-file.md b/components/upload/demo/preview-file.md
index 45f7c3066a..0c36225367 100644
--- a/components/upload/demo/preview-file.md
+++ b/components/upload/demo/preview-file.md
@@ -32,10 +32,9 @@ const props = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/transform-file.md b/components/upload/demo/transform-file.md
index 40b394033a..5ff42d68ab 100644
--- a/components/upload/demo/transform-file.md
+++ b/components/upload/demo/transform-file.md
@@ -44,10 +44,9 @@ const props = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/upload-custom-action-icon.md b/components/upload/demo/upload-custom-action-icon.md
index 13d2da18f2..969037ba79 100644
--- a/components/upload/demo/upload-custom-action-icon.md
+++ b/components/upload/demo/upload-custom-action-icon.md
@@ -54,10 +54,9 @@ const props = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Upload {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
-  </Upload>,
-  mountNode,
+  </Upload>
 );
 ```
diff --git a/components/upload/demo/upload-manually.md b/components/upload/demo/upload-manually.md
index 1db5f147d3..ec6b34bdf1 100644
--- a/components/upload/demo/upload-manually.md
+++ b/components/upload/demo/upload-manually.md
@@ -95,5 +95,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/upload/demo/upload-png-only.md b/components/upload/demo/upload-png-only.md
index 4a2687b0b9..e5fbdac564 100644
--- a/components/upload/demo/upload-png-only.md
+++ b/components/upload/demo/upload-png-only.md
@@ -38,5 +38,5 @@ const Uploader = () => {
   );
 };
 
-ReactDOM.render(<Uploader />, mountNode);
+export default () => <Uploader />;
 ```
diff --git a/components/upload/demo/upload-with-aliyun-oss.md b/components/upload/demo/upload-with-aliyun-oss.md
index d2bbb5bb19..8bdc0db03b 100644
--- a/components/upload/demo/upload-with-aliyun-oss.md
+++ b/components/upload/demo/upload-with-aliyun-oss.md
@@ -120,5 +120,5 @@ const FormPage = () => (
   </Form>
 );
 
-ReactDOM.render(<FormPage />, mountNode);
+export default () => <FormPage />;
 ```
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 0fac22efa0..e523884381 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -129,6 +129,7 @@ export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
   itemRender?: ItemRender<T>;
   /** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
   maxCount?: number;
+  children?: React.ReactNode;
 }
 
 export interface UploadState<T = any> {
diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md
index 3206212a3c..8189184535 100644
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@@ -126,6 +126,10 @@ ConfigProvider.config({
 });
 ```
 
+### Why shouldn't I use component internal props or state with ref?
+
+You should only access the API by official doc with ref. Directly access internal `props` or `state` is not recommended which will make your code strong coupling with current version. Any refactor will break your code like refactor with [Hooks](https://reactjs.org/docs/hooks-intro.html) version, delete or rename internal `props` or `state`, adjust internal node constructor, etc.
+
 ### How to spell Ant Design correctly?
 
 - ✅ **Ant Design**: Capitalized with space, for the design language.
diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md
index c41be5bf9c..db620ae746 100644
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@@ -140,6 +140,10 @@ ConfigProvider.config({
 });
 ```
 
+### 为什么我不应该通过 ref 访问组件内部的 props 和 state？
+
+你通过 ref 获得引用时只应该使用文档提供的方法。直接读取组件内部的 `props` 和 `state` 不是一个好的设计，这会使你的代码与组件版本强耦合。任何重构都可能会使你的代码无法工作，其中重构包括且不仅限于改造成 [Hooks](https://reactjs.org/docs/hooks-intro.html) 版本、移除 / 更名内部 `props` 与 `state`、调整内部 React 节点结构等等。
+
 ### 如何正确的拼写 Ant Design？
 
 - ✅ **Ant Design**：用空格分隔的首字母大写单词，指代设计语言。
@@ -149,6 +153,7 @@ ConfigProvider.config({
 下面是一些典型的错误例子：
 
 - ❌ AntD
+- ❌ Ant-D
 - ❌ antD
 - ❌ Antd
 - ❌ ant design
diff --git a/package.json b/package.json
index 77ac9a0d4e..8798efe431 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.19.5-alpha.0",
+  "version": "4.19.5",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -101,7 +101,7 @@
     "version": "node ./scripts/generate-version",
     "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 enzyme-adapter-react-16",
     "install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17",
-    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18",
+    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18 @testing-library/react@13",
     "argos": "argos upload imageSnapshots"
   },
   "browserslist": [
@@ -122,14 +122,14 @@
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
-    "moment": "^2.25.3",
+    "moment": "^2.29.2",
     "rc-cascader": "~3.4.1",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.7.0",
     "rc-drawer": "~4.4.2",
     "rc-dropdown": "~3.4.0",
-    "rc-field-form": "~1.24.0",
+    "rc-field-form": "~1.25.0",
     "rc-image": "~5.3.0",
     "rc-input": "~0.0.1-alpha.5",
     "rc-input-number": "~7.3.0",
@@ -155,19 +155,19 @@
     "rc-tree-select": "~5.2.0",
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
-    "rc-util": "^5.19.3",
+    "rc-util": "^5.20.0",
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
     "@ant-design/bisheng-plugin": "^3.0.1",
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^14.0.2",
-    "@docsearch/css": "^3.0.0-alpha.39",
-    "@docsearch/react": "^3.0.0-alpha.39",
+    "@docsearch/css": "^3.0.0",
+    "docsearch-react-fork": "^0.0.0-alpha.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@stackblitz/sdk": "^1.3.0",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.0.0",
     "@types/enzyme": "^3.10.5",
     "@types/gtag.js": "^0.0.10",
     "@types/jest": "^27.0.0",
@@ -176,10 +176,10 @@
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
     "@types/puppeteer": "^5.4.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.1",
     "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-window": "^1.8.2",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
@@ -189,9 +189,9 @@
     "argos-cli": "^0.3.0",
     "array-move": "^4.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "bisheng": "^3.0.0",
+    "bisheng": "^3.2.1",
     "bisheng-plugin-description": "^0.1.4",
-    "bisheng-plugin-react": "^1.1.2",
+    "bisheng-plugin-react": "^1.2.0",
     "bisheng-plugin-toc": "^0.4.4",
     "bundlesize": "^0.18.0",
     "chalk": "^4.0.0",
@@ -217,7 +217,7 @@
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-unicorn": "^41.0.0",
+    "eslint-plugin-unicorn": "^42.0.0",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",
@@ -260,7 +260,7 @@
     "react-fast-marquee": "^1.2.1",
     "react-github-button": "^0.1.11",
     "react-helmet-async": "~1.2.0",
-    "react-highlight-words": "^0.17.0",
+    "react-highlight-words": "^0.18.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^5.20.4",
     "react-resizable": "^3.0.1",
diff --git a/scripts/batch/convert-demo.js b/scripts/batch/convert-demo.js
new file mode 100644
index 0000000000..eba05a6e79
--- /dev/null
+++ b/scripts/batch/convert-demo.js
@@ -0,0 +1,37 @@
+/* eslint-disable no-await-in-loop, no-console */
+
+// ==============================================================================
+// This script is used for converting demo with ES6 `export default` grammar
+// PR: https://github.com/ant-design/ant-design/pull/34843
+// ==============================================================================
+
+const path = require('path');
+const glob = require('glob');
+const fs = require('fs-extra');
+const chalk = require('chalk');
+
+(async () => {
+  console.time('Execution...');
+
+  const demoFiles = glob.sync(path.join(process.cwd(), 'components/*/demo/*.md'));
+
+  const tmpFolder = path.resolve('components', '~tmp');
+  await fs.remove(tmpFolder);
+  await fs.ensureDir(tmpFolder);
+
+  function getConvertedDemo(content) {
+    return content.replace(
+      /ReactDOM.render\(([\S\s]*),\s*mountNode,?(\n)?\);/g,
+      'export default () => ($1$2);',
+    );
+  }
+
+  for (let i = 0; i < demoFiles.length; i += 1) {
+    const demoPath = demoFiles[i];
+    console.log(chalk.white(`Converting demos(${i + 1}/${demoFiles.length}): ${demoPath}`));
+    const content = await fs.readFile(demoPath, 'utf8');
+    const newContent = getConvertedDemo(content);
+    await fs.writeFile(demoPath, newContent, 'utf8');
+  }
+  console.log(chalk.green(`All demos(${i + 1}/${demoFiles.length}) done.`));
+})();
diff --git a/scripts/check-ts-demo.js b/scripts/check-ts-demo.js
index 1111e39f0a..9aecabd730 100644
--- a/scripts/check-ts-demo.js
+++ b/scripts/check-ts-demo.js
@@ -32,11 +32,10 @@ const { spawn } = require('child_process');
 
     let script = lines.slice(tsxStartLine + 1, tsxEndLine).join('\n');
 
-    // insert React & ReactDOM
+    // insert React
     if (!script.includes('import React') && !script.includes('import * as React')) {
       script = `import React from 'react';\n${script}`;
     }
-    script = `import ReactDOM from 'react-dom';\n${script}`;
 
     // Replace mountNode
     script = script.replace('mountNode', `document.getElementById('#root')`);
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
index fe210d593d..3e0c818000 100644
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@@ -87,6 +87,7 @@ module.exports = {
       };
     } else if (process.env.ESBUILD) {
       // use esbuild
+      config.optimization.minimize = true;
       config.optimization.minimizer = [
         new ESBuildMinifyPlugin({
           target: 'es2015',
diff --git a/site/theme/en-US.js b/site/theme/en-US.js
index 746fccd5be..c93e26372d 100644
--- a/site/theme/en-US.js
+++ b/site/theme/en-US.js
@@ -24,6 +24,8 @@ module.exports = {
     'app.component.examples.collapse': 'Collapse all code',
     'app.component.examples.visible': 'Expand debug examples',
     'app.component.examples.hide': 'Collapse debug examples',
+    'app.component.examples.openDemoNotReact18': 'Open Demo with React < 18',
+    'app.component.examples.openDemoWithReact18': 'Open Demo with React 18',
     'app.demo.debug': "Debug only, won't display at online",
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',
diff --git a/site/theme/template/Components/Helmet.tsx b/site/theme/template/Components/Helmet.tsx
new file mode 100644
index 0000000000..22e278996f
--- /dev/null
+++ b/site/theme/template/Components/Helmet.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Helmet, HelmetProps } from 'react-helmet-async';
+
+export interface WrapHelmetProps extends HelmetProps {
+  children?: React.ReactNode;
+}
+
+export default function WrapHelmet(props: WrapHelmetProps) {
+  return <Helmet {...props} />;
+}
diff --git a/site/theme/template/Content/Article.tsx b/site/theme/template/Content/Article.tsx
index a8d059e3b3..0796ec2804 100644
--- a/site/theme/template/Content/Article.tsx
+++ b/site/theme/template/Content/Article.tsx
@@ -1,10 +1,10 @@
 import React, { Children, cloneElement } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Helmet } from 'react-helmet-async';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline, Alert, Affix } from 'antd';
 import EditButton from './EditButton';
 import { getMetaDescription } from '../utils';
+import WrapHelmet from '../Components/Helmet';
 
 interface LocaleString {
   [locale: string]: string;
@@ -111,11 +111,11 @@ class Article extends React.Component<ArticleProps> {
 
     return (
       <article className="markdown" onClick={this.onResourceClick}>
-        <Helmet encodeSpecialCharacters={false}>
+        <WrapHelmet encodeSpecialCharacters={false}>
           {helmetTitle && <title>{helmetTitle}</title>}
           {helmetTitle && <meta property="og:title" content={helmetTitle} />}
           {metaDesc && <meta name="description" content={metaDesc} />}
-        </Helmet>
+        </WrapHelmet>
         {isNotTranslated && (
           <Alert
             type="warning"
@@ -131,7 +131,7 @@ class Article extends React.Component<ArticleProps> {
         )}
         <div className={titleRegionClassName}>
           <h1>
-            {(title as LocaleString)[locale] || title}
+            {typeof title === 'object' && title ? title[locale] : title}
             {!subtitle || locale === 'en-US' ? null : <span className="subtitle">{subtitle}</span>}
             <EditButton
               title={<FormattedMessage id="app.content.edit-page" />}
diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
index a5c0b5eaff..d5acf408c3 100644
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -4,7 +4,14 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { Row, Col, Affix, Tooltip } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
-import { CodeFilled, CodeOutlined, BugFilled, BugOutlined } from '@ant-design/icons';
+import {
+  CodeFilled,
+  CodeOutlined,
+  BugFilled,
+  BugOutlined,
+  ExperimentOutlined,
+  ExperimentFilled,
+} from '@ant-design/icons';
 import Demo from './Demo';
 import EditButton from './EditButton';
 import { ping, getMetaDescription } from '../utils';
@@ -18,6 +25,7 @@ class ComponentDoc extends React.Component {
     expandAll: false,
     visibleAll: process.env.NODE_ENV !== 'production',
     showRiddleButton: false,
+    react18Demo: true,
   };
 
   componentDidMount() {
@@ -41,11 +49,12 @@ class ComponentDoc extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     const { location, theme } = this.props;
     const { location: nextLocation, theme: nextTheme } = nextProps;
-    const { expandAll, visibleAll, showRiddleButton } = this.state;
+    const { expandAll, visibleAll, showRiddleButton, react18Demo } = this.state;
     const {
       expandAll: nextExpandAll,
       visibleAll: nextVisibleAll,
       showRiddleButton: nextShowRiddleButton,
+      react18Demo: nextReact18Demo,
     } = nextState;
 
     if (
@@ -54,7 +63,8 @@ class ComponentDoc extends React.Component {
       showRiddleButton === nextShowRiddleButton &&
       theme === nextTheme &&
       visibleAll === nextVisibleAll &&
-      showRiddleButton === nextShowRiddleButton
+      showRiddleButton === nextShowRiddleButton &&
+      react18Demo === nextReact18Demo
     ) {
       return false;
     }
@@ -79,6 +89,13 @@ class ComponentDoc extends React.Component {
     });
   };
 
+  handleDemoVersionToggle = () => {
+    const { react18Demo } = this.state;
+    this.setState({
+      react18Demo: !react18Demo,
+    });
+  };
+
   render() {
     const {
       doc,
@@ -91,7 +108,7 @@ class ComponentDoc extends React.Component {
     } = this.props;
     const { content, meta } = doc;
     const demoValues = Object.keys(demos).map(key => demos[key]);
-    const { expandAll, visibleAll, showRiddleButton } = this.state;
+    const { expandAll, visibleAll, showRiddleButton, react18Demo } = this.state;
     const isSingleCol = meta.cols === 1;
     const leftChildren = [];
     const rightChildren = [];
@@ -114,6 +131,7 @@ class ComponentDoc extends React.Component {
             location={location}
             theme={theme}
             setIframeTheme={setIframeTheme}
+            react18={react18Demo}
           />
         );
         if (index % 2 === 0 || isSingleCol) {
@@ -202,6 +220,27 @@ class ComponentDoc extends React.Component {
                   <BugOutlined className={expandTriggerClass} onClick={this.handleVisibleToggle} />
                 )}
               </Tooltip>
+              <Tooltip
+                title={
+                  <FormattedMessage
+                    id={`app.component.examples.${
+                      react18Demo ? 'openDemoNotReact18' : 'openDemoWithReact18'
+                    }`}
+                  />
+                }
+              >
+                {react18Demo ? (
+                  <ExperimentFilled
+                    className={expandTriggerClass}
+                    onClick={this.handleDemoVersionToggle}
+                  />
+                ) : (
+                  <ExperimentOutlined
+                    className={expandTriggerClass}
+                    onClick={this.handleDemoVersionToggle}
+                  />
+                )}
+              </Tooltip>
             </span>
           </h2>
         </section>
diff --git a/site/theme/template/Content/Demo/index.jsx b/site/theme/template/Content/Demo/index.jsx
index f2cf4ea812..24417a6108 100644
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@@ -48,13 +48,14 @@ class Demo extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     const { codeExpand, copied, copyTooltipVisible } = this.state;
-    const { expand, theme, showRiddleButton } = this.props;
+    const { expand, theme, showRiddleButton, react18 } = this.props;
     return (
       (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand) ||
       copied !== nextState.copied ||
       copyTooltipVisible !== nextState.copyTooltipVisible ||
       nextProps.theme !== theme ||
-      nextProps.showRiddleButton !== showRiddleButton
+      nextProps.showRiddleButton !== showRiddleButton ||
+      nextProps.react18 !== react18
     );
   }
 
@@ -136,6 +137,7 @@ class Demo extends React.Component {
       intl: { locale },
       theme,
       showRiddleButton,
+      react18,
     } = props;
     const { copied, copyTooltipVisible } = state;
     if (!this.liveDemo) {
@@ -204,11 +206,13 @@ class Demo extends React.Component {
     );
 
     dependencies['@ant-design/icons'] = 'latest';
+    dependencies.react = react18 ? '^18.0.0' : '^17.0.0';
+    dependencies['react-dom'] = react18 ? '^18.0.0' : '^17.0.0';
 
     const codepenPrefillConfig = {
       title: `${localizedTitle} - antd@${dependencies.antd}`,
       html,
-      js: sourceCode
+      js: `${react18 ? 'const { createRoot } = ReactDOM;\n' : ''}${sourceCode
         .replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
         .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
         .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
@@ -218,14 +222,19 @@ class Demo extends React.Component {
           /import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
           'const { $1 } = ReactRouterDOM;',
         )
-        .replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2'),
+        .replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2')
+        .replace(/export default/, 'const Demo =')}\n\n${
+        react18 ? 'createRoot(mountNode).render(<Demo />)' : 'ReactDOM.render(<Demo />, mountNode)'
+      };\n`,
       css: prefillStyle,
       editors: '001',
       // eslint-disable-next-line no-undef
       css_external: `https://unpkg.com/antd@${antdReproduceVersion}/dist/antd.css`,
       js_external: [
-        'react@16.x/umd/react.development.js',
-        'react-dom@16.x/umd/react-dom.development.js',
+        react18 ? 'react@18/umd/react.development.js' : 'react@16.x/umd/react.development.js',
+        react18
+          ? 'react-dom@18/umd/react-dom.development.js'
+          : 'react-dom@16.x/umd/react-dom.development.js',
         'moment/min/moment-with-locales.js',
         // eslint-disable-next-line no-undef
         `antd@${antdReproduceVersion}/dist/antd-with-locales.js`,
@@ -240,7 +249,13 @@ class Demo extends React.Component {
 
     const riddlePrefillConfig = {
       title: `${localizedTitle} - antd@${dependencies.antd}`,
-      js: sourceCode,
+      js: `${
+        react18
+          ? `import React from 'react';\nimport { createRoot } from 'react-dom/client';\n`
+          : ''
+      }${sourceCode.replace(/export default/, 'const Demo =')}\n\n${
+        react18 ? 'createRoot(mountNode).render(<Demo />)' : 'ReactDOM.render(<Demo />, mountNode)'
+      };\n`,
       css: prefillStyle,
       json: JSON.stringify(
         {
@@ -263,12 +278,11 @@ class Demo extends React.Component {
       parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
     }
 
-    const indexJsContent = `
+    const demoJsContent = `
 ${importReactContent}
-import ReactDOM from 'react-dom';
 import 'antd/dist/antd.css';
 import './index.css';
-${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
+${parsedSourceCode}
 `.trim();
     const indexCssContent = (style || '')
       .trim()
@@ -276,13 +290,29 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
       .replace('</style>', '')
       .replace('<style>', '');
 
+    const indexJsContent = react18
+      ? `
+${importReactContent}
+import { createRoot } from 'react-dom/client';
+import Demo from './demo';
+
+createRoot(document.getElementById('container')).render(<Demo />);
+`
+      : `
+${importReactContent}
+import ReactDOM from 'react-dom';
+import Demo from './demo';
+
+ReactDOM.render(<Demo />, document.getElementById('container'));
+`;
+
     const codesandboxPackage = {
       title: `${localizedTitle} - antd@${dependencies.antd}`,
       main: 'index.js',
       dependencies: {
         ...dependencies,
-        react: '^16.14.0',
-        'react-dom': '^16.14.0',
+        react: react18 ? '^18.0.0' : '^16.14.0',
+        'react-dom': react18 ? '^18.0.0' : '^16.14.0',
         'react-scripts': '^4.0.0',
       },
       devDependencies: {
@@ -301,6 +331,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
         'package.json': { content: codesandboxPackage },
         'index.css': { content: indexCssContent },
         'index.js': { content: indexJsContent },
+        'demo.js': { content: demoJsContent },
         'index.html': {
           content: html,
         },
@@ -313,6 +344,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
       files: {
         'index.css': indexCssContent,
         'index.js': indexJsContent,
+        'demo.js': demoJsContent,
         'index.html': html,
       },
     };
@@ -320,7 +352,9 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
     let codeBox = (
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
-          <ErrorBoundary>{this.liveDemo}</ErrorBoundary>
+          <ErrorBoundary>
+            <React.StrictMode>{this.liveDemo}</React.StrictMode>
+          </ErrorBoundary>
           {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
         </section>
         <section className="code-box-meta markdown">
diff --git a/site/theme/template/Home/index.tsx b/site/theme/template/Home/index.tsx
index 1296a04a9c..6b7c199d29 100644
--- a/site/theme/template/Home/index.tsx
+++ b/site/theme/template/Home/index.tsx
@@ -29,6 +29,7 @@ function getStyle() {
 interface BlockContentProps {
   title: React.ReactNode;
   extra?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 const BlockContent: React.FC<BlockContentProps> = ({ title, children, extra }) => (
diff --git a/site/theme/template/Layout/Header/SearchBar.tsx b/site/theme/template/Layout/Header/SearchBar.tsx
index 9c71dd9021..08009170f6 100644
--- a/site/theme/template/Layout/Header/SearchBar.tsx
+++ b/site/theme/template/Layout/Header/SearchBar.tsx
@@ -2,14 +2,18 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Link } from 'bisheng/router';
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet-async';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import { Input, Tooltip, Typography } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import { DocSearchProps, useDocSearchKeyboardEvents, DocSearchModalProps } from '@docsearch/react';
+import {
+  DocSearchProps,
+  useDocSearchKeyboardEvents,
+  DocSearchModalProps,
+} from 'docsearch-react-fork';
 import '@docsearch/css';
 import { SharedProps } from './interface';
 import { IAlgoliaConfig, transformHitUrl } from './algolia-config';
+import WrapHelmet from '../../Components/Helmet';
 
 import './SearchBar.less';
 
@@ -62,7 +66,7 @@ const SearchBar = ({
       return Promise.resolve();
     }
 
-    return import('@docsearch/react/modal').then(({ DocSearchModal }) => {
+    return import('docsearch-react-fork/modal').then(({ DocSearchModal }) => {
       SearchModal = DocSearchModal;
     });
   }, []);
@@ -127,14 +131,14 @@ const SearchBar = ({
         focused: isInputFocus,
       })}
     >
-      <Helmet>
+      <WrapHelmet>
         {/* pre-connect to algolia server */}
         <link
           rel="preconnect"
           href={`https://${algoliaConfig.appId}-dsn.algolia.net`}
           crossOrigin="anonymous"
         />
-      </Helmet>
+      </WrapHelmet>
 
       <Input
         placeholder={searchInputPlaceholder}
diff --git a/site/theme/template/Layout/Header/algolia-config.ts b/site/theme/template/Layout/Header/algolia-config.ts
index 659475ac61..5cb3807db5 100644
--- a/site/theme/template/Layout/Header/algolia-config.ts
+++ b/site/theme/template/Layout/Header/algolia-config.ts
@@ -1,4 +1,4 @@
-import { DocSearchHit } from '@docsearch/react/dist/esm/types';
+import { DocSearchHit } from 'docsearch-react-fork/dist/esm/types';
 
 let _internalATag: HTMLAnchorElement | null;
 
diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx
index 6b7fe8a183..b94c23d34f 100644
--- a/site/theme/template/Layout/Header/index.tsx
+++ b/site/theme/template/Layout/Header/index.tsx
@@ -11,7 +11,7 @@ import SearchBar from './SearchBar';
 import More from './More';
 import Navigation from './Navigation';
 import Github from './Github';
-import SiteContext from '../SiteContext';
+import SiteContext, { SiteContextProps } from '../SiteContext';
 import { ping } from '../../utils';
 import { AlgoliaConfig } from './algolia-config';
 
@@ -89,6 +89,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     showTechUIButton: false,
   };
 
+  context: SiteContextProps;
+
   componentDidMount() {
     const { intl, router } = this.props;
     router.listen(this.handleHideMenu);
diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
index 60df10fbb5..a8b2249b56 100644
--- a/site/theme/zh-CN.js
+++ b/site/theme/zh-CN.js
@@ -24,6 +24,8 @@ module.exports = {
     'app.component.examples.collapse': '收起全部代码',
     'app.component.examples.visible': '显示调试专用演示',
     'app.component.examples.hide': '隐藏调试专用演示',
+    'app.component.examples.openDemoNotReact18': '使用 React 18 以下版本打开 Demo',
+    'app.component.examples.openDemoWithReact18': '使用 React 18 打开 Demo',
     'app.demo.debug': '此演示仅供调试，线上不会展示',
     'app.demo.copy': '复制代码',
     'app.demo.copied': '复制成功',
diff --git a/tests/shared/demoTest.tsx b/tests/shared/demoTest.tsx
index 2c51e72052..e674d80d49 100644
--- a/tests/shared/demoTest.tsx
+++ b/tests/shared/demoTest.tsx
@@ -70,22 +70,22 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
         const errSpy = excludeWarning();
 
         MockDate.set(moment('2016-11-22').valueOf());
-        let demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
-
+        let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
         // Inject Trigger status unless skipped
+        Demo = typeof Demo === 'function' ? <Demo /> : Demo;
         if (doInject) {
-          demo = (
+          Demo = (
             <TriggerMockContext.Provider
               value={{
                 popupVisible: true,
               }}
             >
-              {demo}
+              {Demo}
             </TriggerMockContext.Provider>
           );
         }
 
-        const wrapper = render(demo);
+        const wrapper = render(Demo);
 
         // Convert aria related content
         ariaConvert(wrapper);
diff --git a/tests/shared/imageTest.ts b/tests/shared/imageTest.tsx
similarity index 93%
rename from tests/shared/imageTest.ts
rename to tests/shared/imageTest.tsx
index 1e07f8bacc..0471a5ad8b 100644
--- a/tests/shared/imageTest.ts
+++ b/tests/shared/imageTest.tsx
@@ -60,8 +60,11 @@ export function imageDemoTest(component: string, options: Options = {}) {
     }
     testMethod(`Test ${file} image`, () => {
       // eslint-disable-next-line global-require,import/no-dynamic-require
-      const demo = require(`../.${file}`).default;
-      imageTest(demo);
+      let Demo = require(`../.${file}`).default;
+      if (typeof Demo === 'function') {
+        Demo = <Demo />;
+      }
+      imageTest(Demo);
     });
   });
 }
diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts
index d586d4e7b0..76112ff63a 100644
--- a/typings/custom-typings.d.ts
+++ b/typings/custom-typings.d.ts
@@ -32,10 +32,10 @@ declare module '*.json' {
   export default value;
 }
 
-declare module '@docsearch/react/style/modal';
+declare module 'docsearch-react-fork/style/modal';
 
-declare module '@docsearch/react/modal' {
-  import { DocSearchModal as value } from '@docsearch/react';
+declare module 'docsearch-react-fork/modal' {
+  import { DocSearchModal as value } from 'docsearch-react-fork';
   export const DocSearchModal = value;
 }