docs: segmented update (#35171)

* docs: segmented update

* test: fix lint

components/segmented/demo/basic.md

@@ -16,10 +16,7 @@ The most basic usage.
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
-  <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />,
-  mountNode,
-);
+export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
 ```
 
 ```css

components/segmented/demo/block.md

@@ -16,8 +16,7 @@ title:
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
-  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />,
-  mountNode,
+export default () => (
+  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
 );
 ```

components/segmented/demo/controlled.md

@@ -13,12 +13,12 @@ title:
 
 Controlled Segmented.
 
-```jsx
+```tsx
 import React, { useState } from 'react';
 import { Segmented } from 'antd';
 
 const Demo: React.FC = () => {
-  const [value, setValue] = useState('Map');
+  const [value, setValue] = useState<string | number>('Map');
 
   return (
     <Segmented
@@ -29,5 +29,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default Demo;
 ```

components/segmented/demo/custom.md

@@ -17,7 +17,7 @@ Custom each Segmented Item by ReactNode.
 import { Avatar, Segmented } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Segmented
       options={[
@@ -91,7 +91,6 @@ ReactDOM.render(
         },
       ]}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/segmented/demo/disabled.md

@@ -16,7 +16,7 @@ Disabled Segmented.
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
     <br />
@@ -29,7 +29,6 @@ ReactDOM.render(
         'Yearly',
       ]}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/segmented/demo/size.md

@@ -16,14 +16,13 @@ There are three sizes of an Segmented: `large` (40px), `default` (32px) and `sma
 ```jsx
 import { Segmented } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <br />
     <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <br />
     <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/segmented/demo/with-icon.md

@@ -17,7 +17,7 @@ Set `icon` for Segmented Item.
 import { Segmented } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Segmented
     options={[
       {
@@ -31,7 +31,6 @@ ReactDOM.render(
         icon: <AppstoreOutlined />,
       },
     ]}
-  />,
-  mountNode,
+  />
 );
 ```