diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
index d2d8fe297a..cbc7404939 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
@@ -177,7 +177,7 @@ exports[`renders ./components/mentions/demo/prefix.md correctly 1`] = `
 `;
 
 exports[`renders ./components/mentions/demo/readonly.md correctly 1`] = `
-<div>
+Array [
   <div
     style="margin-bottom:10px"
   >
@@ -192,7 +192,7 @@ exports[`renders ./components/mentions/demo/readonly.md correctly 1`] = `
         rows="1"
       />
     </div>
-  </div>
+  </div>,
   <div
     class="ant-mentions"
     style="width:100%"
@@ -203,6 +203,6 @@ exports[`renders ./components/mentions/demo/readonly.md correctly 1`] = `
       readonly=""
       rows="1"
     />
-  </div>
-</div>
+  </div>,
+]
 `;
diff --git a/components/mentions/demo/readonly.md b/components/mentions/demo/readonly.md
index 864f4fcb86..93c9917cc3 100644
--- a/components/mentions/demo/readonly.md
+++ b/components/mentions/demo/readonly.md
@@ -28,7 +28,7 @@ function getOptions() {
 
 function App() {
   return (
-    <div>
+    <>
       <div style={{ marginBottom: 10 }}>
         <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
           {getOptions()}
@@ -37,7 +37,7 @@ function App() {
       <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
         {getOptions()}
       </Mentions>
-    </div>
+    </>
   );
 }
 
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index b8eafc251c..85d27af2ed 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-slider"
   >
@@ -28,7 +28,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
+  </div>,
   <div
     class="ant-slider"
   >
@@ -65,8 +65,8 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
-  Disabled: 
+  </div>,
+  "Disabled: ",
   <button
     aria-checked="false"
     class="ant-switch ant-switch-small"
@@ -79,12 +79,12 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/slider/demo/event.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-slider"
   >
@@ -111,7 +111,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
+  </div>,
   <div
     class="ant-slider"
   >
@@ -148,8 +148,8 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
@@ -470,10 +470,10 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
 `;
 
 exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
-<div>
+Array [
   <h4>
     included=true
-  </h4>
+  </h4>,
   <div
     class="ant-slider ant-slider-with-marks"
   >
@@ -544,7 +544,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
         </strong>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-slider ant-slider-with-marks"
   >
@@ -625,10 +625,10 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
         </strong>
       </span>
     </div>
-  </div>
+  </div>,
   <h4>
     included=false
-  </h4>
+  </h4>,
   <div
     class="ant-slider ant-slider-with-marks"
   >
@@ -695,10 +695,10 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
         </strong>
       </span>
     </div>
-  </div>
+  </div>,
   <h4>
     marks & step
-  </h4>
+  </h4>,
   <div
     class="ant-slider ant-slider-with-marks"
   >
@@ -769,10 +769,10 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
         </strong>
       </span>
     </div>
-  </div>
+  </div>,
   <h4>
     step=null
-  </h4>
+  </h4>,
   <div
     class="ant-slider ant-slider-with-marks"
   >
@@ -843,12 +843,12 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
         </strong>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-slider"
   >
@@ -875,7 +875,7 @@ exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
+  </div>,
   <div
     class="ant-slider"
   >
@@ -912,8 +912,8 @@ exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
-  Reversed: 
+  </div>,
+  "Reversed: ",
   <button
     aria-checked="true"
     class="ant-switch ant-switch-small ant-switch-checked"
@@ -926,8 +926,8 @@ exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
@@ -985,7 +985,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
 `;
 
 exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-slider"
   >
@@ -1012,7 +1012,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
+  </div>,
   <div
     class="ant-slider"
   >
@@ -1039,12 +1039,12 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
     <div
       class="ant-slider-mark"
     />
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
-<div>
+Array [
   <div
     style="display:inline-block;height:300px;margin-left:70px"
   >
@@ -1075,7 +1075,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-mark"
       />
     </div>
-  </div>
+  </div>,
   <div
     style="display:inline-block;height:300px;margin-left:70px"
   >
@@ -1116,7 +1116,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-mark"
       />
     </div>
-  </div>
+  </div>,
   <div
     style="display:inline-block;height:300px;margin-left:70px"
   >
@@ -1201,6 +1201,6 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         </span>
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index c29f6c819a..db9df0fb8d 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -28,11 +28,11 @@ class Demo extends React.Component {
   render() {
     const { disabled } = this.state;
     return (
-      <div>
+      <>
         <Slider defaultValue={30} disabled={disabled} />
         <Slider range defaultValue={[20, 50]} disabled={disabled} />
         Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
-      </div>
+      </>
     );
   }
 }
diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md
index ac0624d0f3..4e8863874a 100644
--- a/components/slider/demo/event.md
+++ b/components/slider/demo/event.md
@@ -25,7 +25,7 @@ function onAfterChange(value) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
     <Slider
       range
@@ -34,7 +34,7 @@ ReactDOM.render(
       onChange={onChange}
       onAfterChange={onAfterChange}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index a7b7371fc4..8d2a4b7faa 100644
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@@ -29,7 +29,7 @@ const marks = {
 };
 
 ReactDOM.render(
-  <div>
+  <>
     <h4>included=true</h4>
     <Slider marks={marks} defaultValue={37} />
     <Slider range marks={marks} defaultValue={[26, 37]} />
@@ -42,7 +42,7 @@ ReactDOM.render(
 
     <h4>step=null</h4>
     <Slider marks={marks} step={null} defaultValue={37} />
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/slider/demo/reverse.md b/components/slider/demo/reverse.md
index 103e532537..06d3bf95a6 100644
--- a/components/slider/demo/reverse.md
+++ b/components/slider/demo/reverse.md
@@ -28,11 +28,11 @@ class Demo extends React.Component {
   render() {
     const { reverse } = this.state;
     return (
-      <div>
+      <>
         <Slider defaultValue={30} reverse={reverse} />
         <Slider range defaultValue={[20, 50]} reverse={reverse} />
         Reversed: <Switch size="small" checked={reverse} onChange={this.handleReverseChange} />
-      </div>
+      </>
     );
   }
 }
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index 4961231c82..13206c8b5e 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -21,10 +21,10 @@ function formatter(value) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <Slider tipFormatter={formatter} />
     <Slider tipFormatter={null} />
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/slider/demo/vertical.md b/components/slider/demo/vertical.md
index b66c739d1c..6d5bc78d45 100644
--- a/components/slider/demo/vertical.md
+++ b/components/slider/demo/vertical.md
@@ -35,7 +35,7 @@ const marks = {
 };
 
 ReactDOM.render(
-  <div>
+  <>
     <div style={style}>
       <Slider vertical defaultValue={30} />
     </div>
@@ -45,7 +45,7 @@ ReactDOM.render(
     <div style={style}>
       <Slider vertical range marks={marks} defaultValue={[26, 37]} />
     </div>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
index 65bd47dad9..299ada7efe 100644
--- a/components/switch/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -17,7 +17,7 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
-<div>
+Array [
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked ant-switch-disabled"
@@ -31,8 +31,8 @@ exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-primary"
     type="button"
@@ -40,12 +40,12 @@ exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
     <span>
       Toggle disabled
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
-<div>
+Array [
   <button
     aria-checked="true"
     class="ant-switch ant-switch-loading ant-switch-checked ant-switch-disabled"
@@ -80,8 +80,8 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     aria-checked="false"
     class="ant-switch ant-switch-small ant-switch-loading ant-switch-disabled"
@@ -116,12 +116,12 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/switch/demo/size.md correctly 1`] = `
-<div>
+Array [
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked"
@@ -134,8 +134,8 @@ exports[`renders ./components/switch/demo/size.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     aria-checked="true"
     class="ant-switch ant-switch-small ant-switch-checked"
@@ -148,12 +148,12 @@ exports[`renders ./components/switch/demo/size.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/switch/demo/text.md correctly 1`] = `
-<div>
+Array [
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked"
@@ -168,8 +168,8 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
     >
       开启
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     aria-checked="false"
     class="ant-switch"
@@ -184,8 +184,8 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
     >
       0
     </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
   <button
     aria-checked="true"
     class="ant-switch ant-switch-checked"
@@ -219,6 +219,6 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index 622727673a..db011380b9 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -29,13 +29,13 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Switch disabled={this.state.disabled} defaultChecked />
         <br />
         <Button type="primary" onClick={this.toggle}>
           Toggle disabled
         </Button>
-      </div>
+      </>
     );
   }
 }
diff --git a/components/switch/demo/loading.md b/components/switch/demo/loading.md
index 674c247c49..40eefcae1d 100644
--- a/components/switch/demo/loading.md
+++ b/components/switch/demo/loading.md
@@ -17,11 +17,11 @@ Mark a pending state of switch.
 import { Switch } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Switch loading defaultChecked />
     <br />
     <Switch size="small" loading />
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md
index 1f139e5c27..5ce89b7f63 100644
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@@ -17,11 +17,11 @@ title:
 import { Switch } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Switch defaultChecked />
     <br />
     <Switch size="small" defaultChecked />
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index 92fadf4650..f70bba48c2 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -18,7 +18,7 @@ import { Switch } from 'antd';
 import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
     <br />
     <Switch checkedChildren="1" unCheckedChildren="0" />
@@ -28,7 +28,7 @@ ReactDOM.render(
       unCheckedChildren={<CloseOutlined />}
       defaultChecked
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```