docs: demo support react18 (#34843)

* docs: update demo

* chore: add script

* test: fix demo test

* docs: convert demos

* chore: move script

* test: remove react-dom import

* chore: update deps

* docs: update riddle js

* test: fix image test

* docs: fix riddle demo

components/affix/demo/basic.md

@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

components/affix/demo/debug.md

@@ -35,5 +35,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

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>,
+  </Affix>
-  mountNode,
 );
 ```

components/affix/demo/target.md

@@ -30,7 +30,7 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>

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,
 );
 ```
 

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,
 );
 ```

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>

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,
 );
 ```

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" />;
 ```

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,
 );
 ```

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,
 );
 ```

components/alert/demo/error-boundary.md

@@ -34,10 +34,9 @@ const ThrowError: React.FC = () => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <ErrorBoundary>
     <ThrowError />
-  </ErrorBoundary>,
+  </ErrorBoundary>
-  mountNode,
 );
 ```

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,
 );
 ```

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,
 );
 ```

components/alert/demo/smooth-closed.md

@@ -32,5 +32,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

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,
 );
 ```
 

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>,
+  </Anchor>
-  mountNode,
 );
 ```
 

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>,
+  </Anchor>
-  mountNode,
 );
 ```

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>,
+  </Anchor>
-  mountNode,
 );
 ```

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>,
+  </Anchor>
-  mountNode,
 );
 ```

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>,
+  </Anchor>
-  mountNode,
 );
 ```

components/anchor/demo/targetOffset.md

@@ -36,5 +36,5 @@ const AnchorExample: React.FC = () => {
   );
 };
 
-ReactDOM.render(<AnchorExample />, mountNode);
+export default () => <AnchorExample />;
 ```

components/auto-complete/demo/basic.md

@@ -58,5 +58,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/auto-complete/demo/certain-category.md

@@ -74,7 +74,7 @@ const Complete: React.FC = () => (
   </AutoComplete>
 );
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
 
 ```css

components/auto-complete/demo/custom.md

@@ -52,5 +52,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

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>,
+  </Form>
-  mountNode,
 );
 ```

components/auto-complete/demo/non-case-sensitive.md

@@ -33,5 +33,5 @@ const Complete: React.FC = () => (
   />
 );
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/auto-complete/demo/options.md

@@ -41,5 +41,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/auto-complete/demo/status.md

@@ -38,5 +38,5 @@ const ValidateInputs: React.FC = () => {
   );
 };
 
-ReactDOM.render(<ValidateInputs />, mountNode);
+export default () => <ValidateInputs />;
 ```

components/auto-complete/demo/uncertain-category.md

@@ -77,5 +77,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

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,
 );
 ```
 

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,
 );
 ```
 

components/avatar/demo/dynamic.md

@@ -53,5 +53,5 @@ const Autoset: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Autoset />, mountNode);
+export default () => <Autoset />;
 ```

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,
 );
 ```

components/avatar/demo/group.md

@@ -66,5 +66,5 @@ const Demo = () => (
   </>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

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,
 );
 ```

components/avatar/demo/toggle-debug.md

@@ -71,5 +71,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

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,
 );
 ```
 

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,
 );
 ```
 

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>,
+  </div>
-  mountNode,
 );
 ```

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,
 );
 ```
 

components/badge/demo/change.md

@@ -74,5 +74,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

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,
 );
 ```
 

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,
 );
 ```

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>,
+  </a>
-  mountNode,
 );
 ```

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,
 );
 ```

components/badge/demo/no-wrapper.md

@@ -36,5 +36,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

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>,
+  </Badge>
-  mountNode,
 );
 ```

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,
 );
 ```

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,
 );
 ```
 

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>,
+  </Space>
-  mountNode,
 );
 ```

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,
 );
 ```

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,
 );
 ```

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,
 );
 ```

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>,
+  </Breadcrumb>
-  mountNode,
 );
 ```

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>,
+  </Breadcrumb>
-  mountNode,
 );
 ```

components/breadcrumb/demo/react-router.md

@@ -69,11 +69,10 @@ const Home = props => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <HashRouter>
     <Home />
-  </HashRouter>,
+  </HashRouter>
-  mountNode,
 );
 ```
 

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>,
+  </Breadcrumb>
-  mountNode,
 );
 ```

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>,
+  </Breadcrumb>
-  mountNode,
 );
 ```

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>,
+  </Breadcrumb>
-  mountNode,
 );
 ```

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,
 );
 ```

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,
 );
 ```

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,
 );
 ```

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,
 );
 ```
 

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>,
+  </div>
-  mountNode,
 );
 ```
 

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,
 );
 ```

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,
 );
 ```
 

components/button/demo/loading.md

@@ -81,5 +81,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

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,
 );
 ```

components/button/demo/size.md

@@ -67,5 +67,5 @@ class ButtonSize extends React.Component {
   }
 }
 
-ReactDOM.render(<ButtonSize />, mountNode);
+export default () => <ButtonSize />;
 ```

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} />;
 ```

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>,
+  </div>
-  mountNode,
 );
 ```
 

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>,
+  </div>
-  mountNode,
 );
 ```
 

components/calendar/demo/notice-calendar.md

@@ -76,10 +76,7 @@ function monthCellRender(value) {
   ) : null;
 }
 
-ReactDOM.render(
+export default () => <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
-  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
-  mountNode,
-);
 ```
 
 ```css

components/calendar/demo/select.md

@@ -47,5 +47,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

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,
 );
 ```
 

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>,
+  </div>
-  mountNode,
 );
 ```
 

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>,
+  </Card>
-  mountNode,
 );
 ```

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>,
+  </Card>
-  mountNode,
 );
 ```

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>,
+  </div>
-  mountNode,
 );
 ```
 

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>,
+  </Card>
-  mountNode,
 );
 ```

components/card/demo/loading.md

@@ -64,5 +64,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

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>,
+  </Card>
-  mountNode,
 );
 ```

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>,
+  </Card>
-  mountNode,
 );
 ```

components/card/demo/tabs.md

@@ -96,5 +96,5 @@ const TabsCard = () => {
   );
 };
 
-ReactDOM.render(<TabsCard />, mountNode);
+export default () => <TabsCard />;
 ```

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>,
+  </Carousel>
-  mountNode,
 );
 ```

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>,
+  </Carousel>
-  mountNode,
 );
 ```

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>,
+  </Carousel>
-  mountNode,
 );
 ```

components/carousel/demo/position.md

@@ -57,5 +57,5 @@ const PositionCarouselDemo = () => {
   );
 };
 
-ReactDOM.render(<PositionCarouselDemo />, mountNode);
+export default () => <PositionCarouselDemo />;
 ```

components/cascader/demo/basic.md

@@ -55,8 +55,5 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
+export default () => <Cascader options={options} onChange={onChange} placeholder="Please select" />;
-  <Cascader options={options} onChange={onChange} placeholder="Please select" />,
-  mountNode,
-);
 ```

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 />;
 ```

components/cascader/demo/custom-dropdown.md

@@ -61,8 +61,7 @@ function dropdownRender(menus) {
   );
 }
 
-ReactDOM.render(
+export default () => (
-  <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />,
+  <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />
-  mountNode,
 );
 ```

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,
 );
 ```

components/cascader/demo/custom-trigger.md

@@ -63,5 +63,5 @@ class CitySwitcher extends React.Component {
   }
 }
 
-ReactDOM.render(<CitySwitcher />, mountNode);
+export default () => <CitySwitcher />;
 ```

components/cascader/demo/default-value.md

@@ -55,12 +55,7 @@ function onChange(value) {
   console.log(value);
 }
 
-ReactDOM.render(
+export default () => (
-  <Cascader
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
-    defaultValue={['zhejiang', 'hangzhou', 'xihu']}
-    options={options}
-    onChange={onChange}
-  />,
-  mountNode,
 );
 ```

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} />;
 ```

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,
 );
 ```

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,
 );
 ```

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 />;
 ```

components/cascader/demo/multiple.md

@@ -66,5 +66,5 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```