docs: update space demos

components/space/demo/base.md

@@ -17,22 +17,20 @@ Crowded components horizontal spacing.
 import { Button, Space, Upload, Popconfirm } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-function SpaceDemo() {
-  return (
-    <Space>
-      Space
-      <Button type="primary">Button</Button>
-      <Upload>
-        <Button>
-          <UploadOutlined /> Click to Upload
-        </Button>
-      </Upload>
-      <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
-        <Button>Confirm</Button>
-      </Popconfirm>
-    </Space>
-  );
-}
+const App = () => (
+  <Space>
+    Space
+    <Button type="primary">Button</Button>
+    <Upload>
+      <Button>
+        <UploadOutlined /> Click to Upload
+      </Button>
+    </Upload>
+    <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
+      <Button>Confirm</Button>
+    </Popconfirm>
+  </Space>
+);
 
-export default () => <SpaceDemo />;
+export default App;
 ```

components/space/demo/customize.md

@@ -17,7 +17,7 @@ Custom spacing size.
 import React, { useState } from 'react';
 import { Space, Slider, Button } from 'antd';
 
-function SpaceCustomizeSize() {
+function App() {
   const [size, setSize] = useState(8);
 
   return (
@@ -35,5 +35,5 @@ function SpaceCustomizeSize() {
   );
 }
 
-export default () => <SpaceCustomizeSize />;
+export default App;
 ```

components/space/demo/size.md

@@ -21,7 +21,7 @@ Set the size to `large` and `middle` by setting size to large and middle respect
 import React, { useState } from 'react';
 import { Space, Radio, Button } from 'antd';
 
-function SpaceSize() {
+function App() {
   const [size, setSize] = useState('small');
 
   return (
@@ -43,5 +43,5 @@ function SpaceSize() {
   );
 }
 
-export default () => <SpaceSize />;
+export default App;
 ```

components/space/demo/split.md

@@ -16,15 +16,13 @@ Crowded components split.
 ```jsx
 import { Space, Typography, Divider } from 'antd';
 
-function SpaceSplit() {
-  return (
-    <Space split={<Divider type="vertical" />}>
-      <Typography.Link>Link</Typography.Link>
-      <Typography.Link>Link</Typography.Link>
-      <Typography.Link>Link</Typography.Link>
-    </Space>
-  );
-}
+const App = () => (
+  <Space split={<Divider type="vertical" />}>
+    <Typography.Link>Link</Typography.Link>
+    <Typography.Link>Link</Typography.Link>
+    <Typography.Link>Link</Typography.Link>
+  </Space>
+);
 
-export default () => <SpaceSplit />;
+export default App;
 ```

components/space/demo/vertical.md

@@ -16,24 +16,22 @@ Crowded components vertical spacing.
 ```jsx
 import { Space, Card } from 'antd';
 
-function SpaceVertical() {
-  return (
-    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <Card title="Card" size="small">
-        <p>Card content</p>
-        <p>Card content</p>
-      </Card>
-      <Card title="Card" size="small">
-        <p>Card content</p>
-        <p>Card content</p>
-      </Card>
-      <Card title="Card" size="small">
-        <p>Card content</p>
-        <p>Card content</p>
-      </Card>
-    </Space>
-  );
-}
+const App = () => (
+  <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+    <Card title="Card" size="small">
+      <p>Card content</p>
+      <p>Card content</p>
+    </Card>
+    <Card title="Card" size="small">
+      <p>Card content</p>
+      <p>Card content</p>
+    </Card>
+    <Card title="Card" size="small">
+      <p>Card content</p>
+      <p>Card content</p>
+    </Card>
+  </Space>
+);
 
-export default () => <SpaceVertical />;
+export default App;
 ```

components/space/demo/wrap.md

@@ -16,7 +16,7 @@ Auto wrap line.
 ```jsx
 import { Space, Button } from 'antd';
 
-const Demo = () => (
+const App = () => (
   <Space size={[8, 16]} wrap>
     {new Array(20).fill(null).map((_, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -25,5 +25,5 @@ const Demo = () => (
   </Space>
 );
 
-export default Demo;
+export default App;
 ```