docs: Rewrite Badge demos to ES6 component

components/badge/demo/change.md

@@ -17,27 +17,29 @@ The count will be animated as it changes.
 import { Badge, Button, Icon, Switch } from 'antd';
 const ButtonGroup = Button.Group;
 
-const Test = React.createClass({
+class Demo extends React.Component {
-  getInitialState() {
+  state = {
-    return {
+    count: 5,
-      count: 5,
+    show: true,
-      show: true,
+  }
-    };
+
-  },
+  increase = () => {
-  increase() {
     const count = this.state.count + 1;
     this.setState({ count });
-  },
+  }
-  decline() {
+
+  decline = () => {
     let count = this.state.count - 1;
     if (count < 0) {
       count = 0;
     }
     this.setState({ count });
-  },
+  }
-  onChange(show) {
+
+  onChange = (show) => {
     this.setState({ show });
-  },
+  }
+
   render() {
     return (
       <div>
@@ -62,8 +64,8 @@ const Test = React.createClass({
         </div>
       </div>
     );
-  },
+  }
-});
+}
 
-ReactDOM.render(<Test />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ````

components/badge/demo/dot.md

@@ -16,14 +16,16 @@ This will simply display a red badge, without a specific count.
 ````jsx
 import { Badge, Icon } from 'antd';
 
-ReactDOM.render(<div>
+ReactDOM.render(
-  <Badge dot>
+  <div>
-    <Icon type="notification" />
+    <Badge dot>
-  </Badge>
+      <Icon type="notification" />
-  <Badge dot>
+    </Badge>
-    <a href="#">Link something</a>
+    <Badge dot>
-  </Badge>
+      <a href="#">Link something</a>
-</div>, mountNode);
+    </Badge>
+  </div>
+, mountNode);
 ````
 
 <style>

components/badge/demo/no-wrapper.md

@@ -18,9 +18,11 @@ Used in standalone when children is empty.
 ````jsx
 import { Badge } from 'antd';
 
-ReactDOM.render(<div>
+ReactDOM.render(
-  <Badge count={25} />
+  <div>
-  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
+    <Badge count={25} />
-  <Badge count={109} style={{ backgroundColor: '#87d068' }} />
+    <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
-</div>, mountNode);
+    <Badge count={109} style={{ backgroundColor: '#87d068' }} />
+  </div>
+, mountNode);
 ````

components/badge/demo/overflow.md

@@ -16,18 +16,20 @@ title:
 ````jsx
 import { Badge } from 'antd';
 
-ReactDOM.render(<div>
+ReactDOM.render(
-  <Badge count={99}>
+  <div>
-    <a href="#" className="head-example" />
+    <Badge count={99}>
-  </Badge>
+      <a href="#" className="head-example" />
-  <Badge count={100}>
+    </Badge>
-    <a href="#" className="head-example" />
+    <Badge count={100}>
-  </Badge>
+      <a href="#" className="head-example" />
-  <Badge count={99} overflowCount={10}>
+    </Badge>
-    <a href="#" className="head-example" />
+    <Badge count={99} overflowCount={10}>
-  </Badge>
+      <a href="#" className="head-example" />
-  <Badge count={1000} overflowCount={999}>
+    </Badge>
-    <a href="#" className="head-example" />
+    <Badge count={1000} overflowCount={999}>
-  </Badge>
+      <a href="#" className="head-example" />
-</div>, mountNode);
+    </Badge>
+  </div>
+, mountNode);
 ````