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/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/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/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/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 11f839c0e5..d5461ea66b 100644
--- a/components/breadcrumb/demo/overlay.md
+++ b/components/breadcrumb/demo/overlay.md
@@ -36,7 +36,7 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -46,7 +46,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/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 0c5c8c21cd..bfda64186b 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -28,12 +28,11 @@ const menu = (
   </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/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/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/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 b16dd1ef11..1cbc02dcb4 100644
--- a/components/config-provider/demo/theme.md
+++ b/components/config-provider/demo/theme.md
@@ -630,5 +630,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/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 fd4834fbb7..1ec41d619c 100644
--- a/components/dropdown/demo/arrow-center.md
+++ b/components/dropdown/demo/arrow-center.md
@@ -36,7 +36,7 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
       <Button>bottomLeft</Button>
@@ -57,8 +57,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 b4c3880e7f..4c4c6fd16d 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -36,7 +36,7 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(
+export default () => (
   <>
     <Dropdown overlay={menu} placement="bottomLeft" arrow>
       <Button>bottomLeft</Button>
@@ -57,8 +57,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 29232c7cd1..bf6062c1b2 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -38,12 +38,11 @@ const menu = (
   </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 2b81de264e..1ca16cabde 100644
--- a/components/dropdown/demo/context-menu.md
+++ b/components/dropdown/demo/context-menu.md
@@ -24,7 +24,7 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(
+export default () => (
   <Dropdown overlay={menu} trigger={['contextMenu']}>
     <div
       className="site-dropdown-context-menu"
@@ -36,8 +36,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 21e406aa78..c78a87382e 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -41,7 +41,7 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(
+export default () => (
   <Space wrap>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
@@ -68,7 +68,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 06610231eb..ce27433b88 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -29,12 +29,11 @@ const menu = (
   </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 78cee90186..311735329c 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -36,12 +36,11 @@ const menu = (
   </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 f77a996eae..3dec304428 100644
--- a/components/dropdown/demo/loading.md
+++ b/components/dropdown/demo/loading.md
@@ -69,5 +69,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 4f7e020ac3..a1440c6bea 100644
--- a/components/dropdown/demo/menu-full.md
+++ b/components/dropdown/demo/menu-full.md
@@ -57,12 +57,11 @@ const menu = (
   </Menu>
 );
 
-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 ca788a5008..48cec1f4e6 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -54,5 +54,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 196bffc5ef..92b82c5e09 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -36,7 +36,7 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical">
     <Space wrap>
       <Dropdown overlay={menu} placement="bottomLeft">
@@ -60,7 +60,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 35dafc443d..060aa86b79 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -36,12 +36,11 @@ const menu = (
   </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 192f253aed..9c41cff579 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -30,12 +30,11 @@ const menu = (
   </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/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/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..587a31c889 100644
--- a/components/form/demo/col-24-debug.md
+++ b/components/form/demo/col-24-debug.md
@@ -61,5 +61,5 @@ const Demo = () => {
   );
 };
 
-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/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 422916fcc9..90e92a405b 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-betw
 ```jsx
 import { Row, Col, Divider } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">sub-element align left</Divider>
     <Row justify="start">
@@ -59,8 +59,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/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 163efa7705..6aed88fdc1 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -83,7 +83,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 315fe28e22..7936e24062 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -76,7 +76,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 9966f6671c..13bd84a6b1 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -29,7 +29,7 @@ import {
 
 const { Header, Content, Footer, Sider } = Layout;
 
-ReactDOM.render(
+export default () => (
   <Layout hasSider>
     <Sider
       style={{
@@ -172,8 +172,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 1abbe7f777..5c1d5439f2 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" />
@@ -40,8 +40,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 124e92efc5..a8a8d71689 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"
@@ -60,8 +60,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 2172a3a353..dbee21aa7d 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -90,7 +90,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 999930c56c..faef5bedd2 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -20,7 +20,7 @@ import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/
 const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
 
-ReactDOM.render(
+export default () => (
   <Layout>
     <Header className="header">
       <div className="logo" />
@@ -76,8 +76,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 a5f6a4894d..8acb94646f 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -20,7 +20,7 @@ import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/
 const { SubMenu } = Menu;
 const { Header, Content, Footer, Sider } = Layout;
 
-ReactDOM.render(
+export default () => (
   <Layout>
     <Header className="header">
       <div className="logo" />
@@ -68,8 +68,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 90531c9012..a5a74b977b 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" />
@@ -44,8 +44,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/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/demo/horizontal.md b/components/menu/demo/horizontal.md
index 313348fb32..8a3eb15fea 100755
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -59,5 +59,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md
index 4f94e2f85b..ab046be695 100644
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@@ -84,5 +84,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```
diff --git a/components/menu/demo/inline.md b/components/menu/demo/inline.md
index bac7d600d2..339a0893fc 100755
--- a/components/menu/demo/inline.md
+++ b/components/menu/demo/inline.md
@@ -62,5 +62,5 @@ class Sider extends React.Component {
   }
 }
 
-ReactDOM.render(<Sider />, mountNode);
+export default () => <Sider />;
 ```
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 372ca04782..e0f70b310f 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -60,5 +60,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 0002211814..9d3b8a0196 100644
--- a/components/menu/demo/style-debug.md
+++ b/components/menu/demo/style-debug.md
@@ -105,5 +105,5 @@ class Demo extends React.Component<{}, DemoState> {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
diff --git a/components/menu/demo/submenu-theme.md b/components/menu/demo/submenu-theme.md
index e44fb4f7e7..40db825215 100755
--- a/components/menu/demo/submenu-theme.md
+++ b/components/menu/demo/submenu-theme.md
@@ -61,5 +61,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 09ad107654..f695aae509 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -81,5 +81,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 2880585b48..b1b64a18fb 100755
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -83,5 +83,5 @@ class Sider extends React.Component {
   }
 }
 
-ReactDOM.render(<Sider />, mountNode);
+export default () => <Sider />;
 ```
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index 13bc1fb9ea..633243c078 100755
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -23,7 +23,7 @@ function handleClick(e) {
   console.log('click', e);
 }
 
-ReactDOM.render(
+export default () => (
   <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
     <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
       <Menu.ItemGroup title="Item 1">
@@ -49,7 +49,6 @@ ReactDOM.render(
       <Menu.Item key="11">Option 11</Menu.Item>
       <Menu.Item key="12">Option 12</Menu.Item>
     </SubMenu>
-  </Menu>,
-  mountNode,
+  </Menu>
 );
 ```
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/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 75e49e6b56..ba6ab774e5 100644
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@@ -102,7 +102,7 @@ const Content = ({ children, extraContent }) => (
   </Row>
 );
 
-ReactDOM.render(
+export default () => (
   <PageHeader
     title="Title"
     className="site-page-header"
@@ -130,8 +130,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/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/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/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/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/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/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/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..b4f4204616 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -16,5 +16,5 @@ A simple loading status.
 ```jsx
 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..1a5b3ab41c 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -16,11 +16,10 @@ Spin in a container.
 ```jsx
 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..e549539ea5 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -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/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/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 a285bf6aaf..a67eb84e03 100644
--- a/components/table/demo/nest-table-border-debug.md
+++ b/components/table/demo/nest-table-border-debug.md
@@ -123,5 +123,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 66ed9a07a6..3577d055e7 100644
--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@@ -103,5 +103,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/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 c6fd1a0688..d3604877cb 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -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>
 );
 ```
 
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/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/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/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/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/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/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/package.json b/package.json
index 1b2fe4c797..69d0293caa 100644
--- a/package.json
+++ b/package.json
@@ -190,7 +190,7 @@
     "babel-plugin-add-react-displayname": "^0.0.5",
     "bisheng": "^3.0.0",
     "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",
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/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/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..72bebe6da2 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,
       },
     };
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);
     });
   });
 }