docs: update space demos

components/space/demo/base.md

@@ -17,8 +17,7 @@ Crowded components horizontal spacing.
 import { Button, Space, Upload, Popconfirm } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 
-function SpaceDemo() {
-  return (
+const App = () => (
   <Space>
     Space
     <Button type="primary">Button</Button>
@@ -31,8 +30,7 @@ function SpaceDemo() {
       <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 (
+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,8 +16,7 @@ Crowded components vertical spacing.
 ```jsx
 import { Space, Card } from 'antd';
 
-function SpaceVertical() {
-  return (
+const App = () => (
   <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
     <Card title="Card" size="small">
       <p>Card content</p>
@@ -32,8 +31,7 @@ function SpaceVertical() {
       <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;
 ```