diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md
index 435a010e42..ac03e564cf 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -76,54 +76,46 @@ const items: MenuProps['items'] = [
},
];
-class SiderDemo extends React.Component {
- state = {
- collapsed: true,
+export default () => {
+ const [collapsed, setCollapsed] = React.useState(true);
+
+ const toggle = () => {
+ setCollapsed(!collapsed);
};
- toggle = () => {
- this.setState({
- collapsed: !this.state.collapsed,
- });
- };
-
- render() {
- return (
+ return (
+
+
+
+
+
-
-
-
-
-
-
- {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
- className: 'trigger',
- onClick: this.toggle,
- })}
-
-
- Content
-
-
+
+ {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+ className: 'trigger',
+ onClick: toggle,
+ })}
+
+
+ Content
+
- );
- }
-}
-
-export default () => ;
+
+ );
+};
```
```css
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 1cb3e255c3..6de040316c 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -25,69 +25,61 @@ import {
const { Header, Sider, Content } = Layout;
-class SiderDemo extends React.Component {
- state = {
- collapsed: false,
+export default () => {
+ const [collapsed, setCollapsed] = React.useState(false);
+
+ const toggle = () => {
+ setCollapsed(!collapsed);
};
- toggle = () => {
- this.setState({
- collapsed: !this.state.collapsed,
- });
- };
-
- render() {
- return (
-
-
-
- ,
- label: 'nav 1',
- },
- {
- key: '2',
- icon: ,
- label: 'nav 2',
- },
- {
- key: '3',
- icon: ,
- label: 'nav 3',
- },
- ]}
- />
-
-
-
- {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
- className: 'trigger',
- onClick: this.toggle,
- })}
-
-
- Content
-
-
+ return (
+
+
+
+ ,
+ label: 'nav 1',
+ },
+ {
+ key: '2',
+ icon: ,
+ label: 'nav 2',
+ },
+ {
+ key: '3',
+ icon: ,
+ label: 'nav 3',
+ },
+ ]}
+ />
+
+
+
+ {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+ className: 'trigger',
+ onClick: toggle,
+ })}
+
+
+ Content
+
- );
- }
-}
-
-export default () => ;
+
+ );
+};
```
```css
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 6161dabdb7..47856256dd 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -63,43 +63,36 @@ const items: MenuItem[] = [
getItem('Files', '9', ),
];
-class SiderDemo extends React.Component {
- state = {
- collapsed: false,
+export default () => {
+ const [collapsed, setCollapsed] = React.useState(false);
+
+ const onCollapse = (isCollapsed: boolean) => {
+ console.log(isCollapsed);
+ setCollapsed(isCollapsed);
};
- onCollapse = (collapsed: boolean) => {
- console.log(collapsed);
- this.setState({ collapsed });
- };
-
- render() {
- const { collapsed } = this.state;
- return (
-
-
-
-
-
-
-
-
-
- User
- Bill
-
-
- Bill is a cat.
-
-
-
-
+ return (
+
+
+
+
+
+
+
+
+
+ User
+ Bill
+
+
+ Bill is a cat.
+
+
+
- );
- }
-}
-
-export default () => ;
+
+ );
+};
```
```css
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index 7ef72d592f..2a7375eb5c 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -14,101 +14,86 @@ title:
Load more list with `loadMore` property.
```jsx
+import React, { useEffect, useState } from 'react';
import { List, Avatar, Button, Skeleton } from 'antd';
const count = 3;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
-class LoadMoreList extends React.Component {
- state = {
- initLoading: true,
- loading: false,
- data: [],
- list: [],
- };
+export default () => {
+ const [initLoading, setInitLoading] = useState(true);
+ const [loading, setLoading] = useState(false);
+ const [data, setData] = useState([]);
- componentDidMount() {
+ useEffect(() => {
fetch(fakeDataUrl)
.then(res => res.json())
.then(res => {
- this.setState({
- initLoading: false,
- data: res.results,
- list: res.results,
- });
+ setInitLoading(false);
+ setData(res.results);
});
- }
+ }, []);
- onLoadMore = () => {
- this.setState({
- loading: true,
- list: this.state.data.concat(
- [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
- ),
- });
- fetch(fakeDataUrl)
- .then(res => res.json())
- .then(res => {
- const data = this.state.data.concat(res.results);
- this.setState(
- {
- data,
- list: data,
- loading: false,
- },
- () => {
- // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
- // In real scene, you can using public method of react-virtualized:
- // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
- window.dispatchEvent(new Event('resize'));
- },
- );
- });
- };
+ useEffect(() => {
+ // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+ // In real scene, you can using public method of react-virtualized:
+ // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+ window.dispatchEvent(new Event('resize'));
+ }, [JSON.stringify(data)]);
- render() {
- const { initLoading, loading, list } = this.state;
- const loadMore =
- !initLoading && !loading ? (
-
-
-
- ) : null;
-
- return (
- (
- edit, more]}
- >
-
- }
- title={{item.name.last}}
- description="Ant Design, a design language for background applications, is refined by Ant UED Team"
- />
- content
-
-
- )}
- />
+ const onLoadMore = () => {
+ setLoading(true);
+ const newData = data.concat(
+ [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })),
);
- }
-}
+ setData(newData);
-export default () => ;
+ fetch(fakeDataUrl)
+ .then(res => res.json())
+ .then(res => {
+ setLoading(false);
+ setData(data.concat(res.results));
+ });
+ };
+
+ const loadMore =
+ !initLoading && !loading ? (
+
+
+
+ ) : null;
+
+ return (
+ (
+ edit, more]}
+ >
+
+ }
+ title={{item.name.last}}
+ description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+ />
+ content
+
+
+ )}
+ />
+ );
+};
```
```css
diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md
index f686e01c6d..3e48539b05 100644
--- a/components/mentions/demo/async.md
+++ b/components/mentions/demo/async.md
@@ -14,68 +14,55 @@ title:
async
```jsx
+import React, { useState, useRef, useMemo } from 'react';
import { Mentions } from 'antd';
import debounce from 'lodash/debounce';
const { Option } = Mentions;
-class AsyncMention extends React.Component {
- constructor() {
- super();
+export default () => {
+ const [loading, setLoading] = useState(false);
+ const [users, setUsers] = useState([]);
+ const searchRef = useRef();
- this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
- }
+ const loadGithubUsers = useMemo(
+ () =>
+ debounce(key => {
+ if (!key) {
+ setUsers([]);
+ return;
+ }
- state = {
- search: '',
- loading: false,
- users: [],
- };
+ fetch(`https://api.github.com/search/users?q=${key}`)
+ .then(res => res.json())
+ .then(({ items = [] }) => {
+ if (searchRef.current !== key) return;
+ setLoading(false);
+ setUsers(items.slice(0, 10));
+ });
+ }, 800),
+ [],
+ );
- onSearch = search => {
- this.setState({ search, loading: !!search, users: [] });
+ const onSearch = search => {
+ setLoading(!!search);
+ setUsers([]);
+ searchRef.current = search;
console.log('Search:', search);
- this.loadGithubUsers(search);
+ loadGithubUsers(search);
};
- loadGithubUsers(key) {
- if (!key) {
- this.setState({
- users: [],
- });
- return;
- }
-
- fetch(`https://api.github.com/search/users?q=${key}`)
- .then(res => res.json())
- .then(({ items = [] }) => {
- const { search } = this.state;
- if (search !== key) return;
-
- this.setState({
- users: items.slice(0, 10),
- loading: false,
- });
- });
- }
-
- render() {
- const { users, loading } = this.state;
-
- return (
-
- {users.map(({ login, avatar_url: avatar }) => (
-
- ))}
-
- );
- }
-}
-
-export default () => ;
+ return (
+
+ {users.map(({ login, avatar_url: avatar }) => (
+
+ ))}
+
+ );
+};
```