From e5b09aa8790a1e750dc83ab077df8b91318821ec Mon Sep 17 00:00:00 2001
From: dingkang <dingkang0458@gmail.com>
Date: Wed, 18 May 2022 19:29:01 +0800
Subject: [PATCH] docs: replace class component with hooks (#35613)

* docs(badge): replace class component with hooks

* docs(button): replace class component with hooks

* docs(calendar): replace class component with hooks

* docs(card): replace class component with hooks

* docs(button): replace class component with hooks

* chore(deps): remove webpack devDependencies

* docs(cascader): replace class component with hooks

* docs(checkbox): replace class component with hooks

* docs(collapse): replace class component with hooks

* docs(comment): replace class component with hooks

* docs(descriptions): replace class component with hooks

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks

* docs(drawer): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(empty): replace class component with hooks

* docs(grid): replace class component with hooks

* docs(input): replace class component with hooks

* docs(input-number): replace class component with hooks

* docs(demo): fix lint error

* docs(layout): replace class component with hooks

* docs(list): replace class component with hooks

* docs(mentions): replace class component with hooks

* docs: fix code review issue

* docs(modal): replace class component with hooks
---
 components/modal/demo/button-props.md |  66 ++--
 components/modal/demo/dark.md         | 529 +++++++++++++-------------
 components/modal/demo/footer.md       | 105 +++--
 components/modal/demo/locale.md       |  58 ++-
 components/modal/demo/modal-render.md | 156 ++++----
 components/modal/demo/position.md     |  92 ++---
 6 files changed, 465 insertions(+), 541 deletions(-)

diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index 2d39e18ec6f4..84853a55e28e 100644
--- a/components/modal/demo/button-props.md
+++ b/components/modal/demo/button-props.md
@@ -16,51 +16,41 @@ Passing `okButtonProps` and `cancelButtonProps` will customize the OK button and
 ```jsx
 import { Modal, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showModal = () => {
-    this.setState({
-      visible: true,
-    });
+  const showModal = () => {
+    setVisible(true);
   };
 
-  handleOk = e => {
+  const handleOk = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  handleCancel = e => {
+  const handleCancel = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showModal}>
-          Open Modal with customized button props
-        </Button>
-        <Modal
-          title="Basic Modal"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          okButtonProps={{ disabled: true }}
-          cancelButtonProps={{ disabled: true }}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        Open Modal with customized button props
+      </Button>
+      <Modal
+        title="Basic Modal"
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        okButtonProps={{ disabled: true }}
+        cancelButtonProps={{ disabled: true }}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal>
+    </>
+  );
+};
 ```
diff --git a/components/modal/demo/dark.md b/components/modal/demo/dark.md
index 52c9e0e52eea..b1e1dc216587 100644
--- a/components/modal/demo/dark.md
+++ b/components/modal/demo/dark.md
@@ -15,6 +15,7 @@ debug: true
 Basic modal.
 
 ```jsx
+import { useState } from 'react';
 import {
   Modal,
   DatePicker,
@@ -296,303 +297,283 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
   </Transfer>
 );
 
-class App extends React.Component {
-  state = {
-    visible: false,
-    targetKeys: oriTargetKeys,
-    selectedKeys: [],
-    disabled: false,
-    showSearch: false,
-  };
+export default () => {
+  const [visible, setVisible] = useState(false);
+  const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [disabled, setDisabled] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
 
-  handleDisable = disabled => {
-    this.setState({
-      disabled,
-    });
+  const handleDisable = isDisabled => {
+    setDisabled(isDisabled);
   };
 
-  handleTableTransferChange = nextTargetKeys => {
-    this.setState({ targetKeys: nextTargetKeys });
+  const handleTableTransferChange = nextTargetKeys => {
+    setTargetKeys(nextTargetKeys);
   };
 
-  triggerDisable = disabled => {
-    this.setState({ disabled });
+  const triggerDisable = isDisabled => {
+    setDisabled(isDisabled);
   };
 
-  triggerShowSearch = showSearch => {
-    this.setState({ showSearch });
+  const triggerShowSearch = isShowSearch => {
+    setShowSearch(isShowSearch);
   };
 
-  handleTransferChange = nextTargetKeys => {
-    this.setState({ targetKeys: nextTargetKeys });
+  const handleTransferChange = nextTargetKeys => {
+    setTargetKeys(nextTargetKeys);
   };
 
-  handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
-    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
+  const handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
   };
 
-  showModal = () => {
-    this.setState({
-      visible: true,
-    });
+  const showModal = () => {
+    setVisible(true);
   };
 
-  handleOk = e => {
+  const handleOk = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  handleCancel = e => {
+  const handleCancel = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  render() {
-    const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
-    const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-        filters: [
-          { text: 'Joe', value: 'Joe' },
-          { text: 'Jim', value: 'Jim' },
-        ],
-        filteredValue: null,
-        onFilter: (value, record) => record.name.includes(value),
-        sorter: (a, b) => a.name.length - b.name.length,
-        sortOrder: true,
-        ellipsis: true,
-      },
-      {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age',
-        sorter: false,
-        sortOrder: true,
-        ellipsis: true,
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-        key: 'address',
-        filters: [
-          { text: 'London', value: 'London' },
-          { text: 'New York', value: 'New York' },
-        ],
-        filteredValue: null,
-        onFilter: (value, record) => record.address.includes(value),
-        sorter: false,
-        sortOrder: true,
-        ellipsis: true,
-      },
-    ];
-    return (
-      <>
-        <Button type="primary" onClick={this.showModal}>
-          Open Modal
-        </Button>
-        <Modal
-          title="Basic Modal"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-        >
-          <Switch
-            unCheckedChildren="disabled"
-            checkedChildren="disabled"
-            checked={disabled}
-            onChange={this.handleDisable}
-            style={{ marginBottom: 16 }}
-          />
-          <Card title="Card Title">
-            <Card.Grid>Content</Card.Grid>
-            <Card.Grid hoverable={false}>Content</Card.Grid>
-            <Card.Grid>Content</Card.Grid>
-            <Card.Grid>Content</Card.Grid>
-            <Card.Grid>Content</Card.Grid>
-            <Card.Grid>Content</Card.Grid>
-            <Card.Grid>Content</Card.Grid>
-          </Card>
-          <Collapse>
-            <Panel header="This is panel header 1" key="1">
-              <Collapse defaultActiveKey="1">
-                <Panel header="This is panel nest panel" key="1">
-                  <p>{text}</p>
-                </Panel>
-              </Collapse>
-            </Panel>
-            <Panel header="This is panel header 2" key="2">
-              <p>{text}</p>
-            </Panel>
-            <Panel header="This is panel header 3" key="3">
-              <p>{text}</p>
-            </Panel>
-          </Collapse>
-          <Transfer
-            dataSource={mockData}
-            titles={['Source', 'Target']}
-            targetKeys={targetKeys}
-            selectedKeys={selectedKeys}
-            onChange={this.handleTransferChange}
-            onSelectChange={this.handleTransferSelectChange}
-            render={item => item.title}
-            disabled={disabled}
-          />
-          <TableTransfer
-            dataSource={mockData}
-            targetKeys={targetKeys}
-            disabled={disabled}
-            showSearch={showSearch}
-            onChange={this.handleTableTransferChange}
-            filterOption={(inputValue, item) =>
-              item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
-            }
-            leftColumns={[
-              {
-                dataIndex: 'title',
-                title: 'Name',
-              },
-              {
-                dataIndex: 'description',
-                title: 'Description',
-              },
-            ]}
-            rightColumns={[
-              {
-                dataIndex: 'title',
-                title: 'Name',
-              },
-            ]}
-          />
-          <Switch
-            unCheckedChildren="disabled"
-            checkedChildren="disabled"
-            checked={disabled}
-            onChange={this.triggerDisable}
-            style={{ marginTop: 16 }}
-          />
-          <Switch
-            unCheckedChildren="showSearch"
-            checkedChildren="showSearch"
-            checked={showSearch}
-            onChange={this.triggerShowSearch}
-            style={{ marginTop: 16 }}
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      filters: [
+        { text: 'Joe', value: 'Joe' },
+        { text: 'Jim', value: 'Jim' },
+      ],
+      filteredValue: null,
+      onFilter: (value, record) => record.name.includes(value),
+      sorter: (a, b) => a.name.length - b.name.length,
+      sortOrder: true,
+      ellipsis: true,
+    },
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+      sorter: false,
+      sortOrder: true,
+      ellipsis: true,
+    },
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+      filters: [
+        { text: 'London', value: 'London' },
+        { text: 'New York', value: 'New York' },
+      ],
+      filteredValue: null,
+      onFilter: (value, record) => record.address.includes(value),
+      sorter: false,
+      sortOrder: true,
+      ellipsis: true,
+    },
+  ];
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        Open Modal
+      </Button>
+      <Modal title="Basic Modal" visible={visible} onOk={handleOk} onCancel={handleCancel}>
+        <Switch
+          unCheckedChildren="disabled"
+          checkedChildren="disabled"
+          checked={disabled}
+          onChange={handleDisable}
+          style={{ marginBottom: 16 }}
+        />
+        <Card title="Card Title">
+          <Card.Grid>Content</Card.Grid>
+          <Card.Grid hoverable={false}>Content</Card.Grid>
+          <Card.Grid>Content</Card.Grid>
+          <Card.Grid>Content</Card.Grid>
+          <Card.Grid>Content</Card.Grid>
+          <Card.Grid>Content</Card.Grid>
+          <Card.Grid>Content</Card.Grid>
+        </Card>
+        <Collapse>
+          <Panel header="This is panel header 1" key="1">
+            <Collapse defaultActiveKey="1">
+              <Panel header="This is panel nest panel" key="1">
+                <p>{text}</p>
+              </Panel>
+            </Collapse>
+          </Panel>
+          <Panel header="This is panel header 2" key="2">
+            <p>{text}</p>
+          </Panel>
+          <Panel header="This is panel header 3" key="3">
+            <p>{text}</p>
+          </Panel>
+        </Collapse>
+        <Transfer
+          dataSource={mockData}
+          titles={['Source', 'Target']}
+          targetKeys={targetKeys}
+          selectedKeys={selectedKeys}
+          onChange={handleTransferChange}
+          onSelectChange={handleTransferSelectChange}
+          render={item => item.title}
+          disabled={disabled}
+        />
+        <TableTransfer
+          dataSource={mockData}
+          targetKeys={targetKeys}
+          disabled={disabled}
+          showSearch={showSearch}
+          onChange={handleTableTransferChange}
+          filterOption={(inputValue, item) =>
+            item.title.indexOf(inputValue) !== -1 || item.tag?.indexOf(inputValue) !== -1
+          }
+          leftColumns={[
+            {
+              dataIndex: 'title',
+              title: 'Name',
+            },
+            {
+              dataIndex: 'description',
+              title: 'Description',
+            },
+          ]}
+          rightColumns={[
+            {
+              dataIndex: 'title',
+              title: 'Name',
+            },
+          ]}
+        />
+        <Switch
+          unCheckedChildren="disabled"
+          checkedChildren="disabled"
+          checked={disabled}
+          onChange={triggerDisable}
+          style={{ marginTop: 16 }}
+        />
+        <Switch
+          unCheckedChildren="showSearch"
+          checkedChildren="showSearch"
+          checked={showSearch}
+          onChange={triggerShowSearch}
+          style={{ marginTop: 16 }}
+        />
+        <Anchor>
+          <Link href="#components-anchor-demo-basic" title="Basic demo" />
+          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link
+            href="#components-anchor-demo-basic"
+            title="Basic demo with Target"
+            target="_blank"
           />
-          <Anchor>
-            <Link href="#components-anchor-demo-basic" title="Basic demo" />
-            <Link href="#components-anchor-demo-static" title="Static demo" />
-            <Link
-              href="#components-anchor-demo-basic"
-              title="Basic demo with Target"
-              target="_blank"
-            />
-            <Link href="#API" title="API">
-              <Link href="#Anchor-Props" title="Anchor Props" />
-              <Link href="#Link-Props" title="Link Props" />
-            </Link>
-          </Anchor>
-          <Tabs type="card">
-            <TabPane tab="Tab 1" key="1">
-              Content of Tab Pane 1
-            </TabPane>
-            <TabPane tab="Tab 2" key="2">
-              Content of Tab Pane 2
-            </TabPane>
-            <TabPane tab="Tab 3" key="3">
-              Content of Tab Pane 3
-            </TabPane>
-          </Tabs>
-          <Timeline>
-            <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
-            <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
-            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
-              Technical testing 2015-09-01
-            </Timeline.Item>
-            <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
-          </Timeline>
-          <Calendar />
-          <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
-            <TreeNode title="parent 1" key="0-0">
-              <TreeNode title="parent 1-0" key="0-0-0">
-                <TreeNode title="leaf" key="0-0-0-0" />
-                <TreeNode title="leaf" key="0-0-0-1" />
-                <TreeNode title="leaf" key="0-0-0-2" />
-              </TreeNode>
-              <TreeNode title="parent 1-1" key="0-0-1">
-                <TreeNode title="leaf" key="0-0-1-0" />
-              </TreeNode>
-              <TreeNode title="parent 1-2" key="0-0-2">
-                <TreeNode title="leaf" key="0-0-2-0" />
-                <TreeNode title="leaf" key="0-0-2-1" />
-              </TreeNode>
+          <Link href="#API" title="API">
+            <Link href="#Anchor-Props" title="Anchor Props" />
+            <Link href="#Link-Props" title="Link Props" />
+          </Link>
+        </Anchor>
+        <Tabs type="card">
+          <TabPane tab="Tab 1" key="1">
+            Content of Tab Pane 1
+          </TabPane>
+          <TabPane tab="Tab 2" key="2">
+            Content of Tab Pane 2
+          </TabPane>
+          <TabPane tab="Tab 3" key="3">
+            Content of Tab Pane 3
+          </TabPane>
+        </Tabs>
+        <Timeline>
+          <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+          <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+          <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
+            Technical testing 2015-09-01
+          </Timeline.Item>
+          <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
+        </Timeline>
+        <Calendar />
+        <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
+          <TreeNode title="parent 1" key="0-0">
+            <TreeNode title="parent 1-0" key="0-0-0">
+              <TreeNode title="leaf" key="0-0-0-0" />
+              <TreeNode title="leaf" key="0-0-0-1" />
+              <TreeNode title="leaf" key="0-0-0-2" />
             </TreeNode>
-          </Tree>
-          <Table columns={columns} dataSource={data} footer={() => 'Footer'} />
-          <Table
-            columns={columnsTable}
-            dataSource={dataTable}
-            pagination={false}
-            id="table-demo-summary"
-            bordered
-            summary={pageData => {
-              let totalBorrow = 0;
-              let totalRepayment = 0;
-
-              pageData.forEach(({ borrow, repayment }) => {
-                totalBorrow += borrow;
-                totalRepayment += repayment;
-              });
-
-              return (
-                <>
-                  <tr>
-                    <th>Total</th>
-                    <td>
-                      <Text type="danger">{totalBorrow}</Text>
-                    </td>
-                    <td>
-                      <Text>{totalRepayment}</Text>
-                    </td>
-                  </tr>
-                  <tr>
-                    <th>Balance</th>
-                    <td colSpan={2}>
-                      <Text type="danger">{totalBorrow - totalRepayment}</Text>
-                    </td>
-                  </tr>
-                </>
-              );
-            }}
-          />
-          <br />
-          <Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
-          <Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
-          <Card
-            hoverable
-            style={{ width: 240 }}
-            cover={
-              <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
-            }
-          >
-            <Meta title="Europe Street beat" description="www.instagram.com" />
-          </Card>
-          <Slider defaultValue={30} />
-          <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
-          <Badge count={5}>
-            <a href="#" className="head-example" />
-          </Badge>
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default App;
+            <TreeNode title="parent 1-1" key="0-0-1">
+              <TreeNode title="leaf" key="0-0-1-0" />
+            </TreeNode>
+            <TreeNode title="parent 1-2" key="0-0-2">
+              <TreeNode title="leaf" key="0-0-2-0" />
+              <TreeNode title="leaf" key="0-0-2-1" />
+            </TreeNode>
+          </TreeNode>
+        </Tree>
+        <Table columns={columns} dataSource={data} footer={() => 'Footer'} />
+        <Table
+          columns={columnsTable}
+          dataSource={dataTable}
+          pagination={false}
+          id="table-demo-summary"
+          bordered
+          summary={pageData => {
+            let totalBorrow = 0;
+            let totalRepayment = 0;
+
+            pageData.forEach(({ borrow, repayment }) => {
+              totalBorrow += borrow;
+              totalRepayment += repayment;
+            });
+
+            return (
+              <>
+                <tr>
+                  <th>Total</th>
+                  <td>
+                    <Text type="danger">{totalBorrow}</Text>
+                  </td>
+                  <td>
+                    <Text>{totalRepayment}</Text>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Balance</th>
+                  <td colSpan={2}>
+                    <Text type="danger">{totalBorrow - totalRepayment}</Text>
+                  </td>
+                </tr>
+              </>
+            );
+          }}
+        />
+        <br />
+        <Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
+        <Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
+        <Card
+          hoverable
+          style={{ width: 240 }}
+          cover={
+            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
+          }
+        >
+          <Meta title="Europe Street beat" description="www.instagram.com" />
+        </Card>
+        <Slider defaultValue={30} />
+        <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
+        <Badge count={5}>
+          <a href="#" className="head-example" />
+        </Badge>
+      </Modal>
+    </>
+  );
+};
 ```
 
 <style>
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index 367b16a843b7..18ac902f5188 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -18,71 +18,64 @@ A more complex example which define a customized footer button bar. The dialog w
 You could set `footer` to `null` if you don't need default footer buttons.
 
 ```jsx
+import { useState } from 'react';
 import { Modal, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    loading: false,
-    visible: false,
-  };
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
 
-  showModal = () => {
-    this.setState({
-      visible: true,
-    });
+  const showModal = () => {
+    setVisible(true);
   };
 
-  handleOk = () => {
-    this.setState({ loading: true });
+  const handleOk = () => {
+    setLoading(true);
     setTimeout(() => {
-      this.setState({ loading: false, visible: false });
+      setLoading(false);
+      setVisible(false);
     }, 3000);
   };
 
-  handleCancel = () => {
-    this.setState({ visible: false });
+  const handleCancel = () => {
+    setVisible(false);
   };
 
-  render() {
-    const { visible, loading } = this.state;
-    return (
-      <>
-        <Button type="primary" onClick={this.showModal}>
-          Open Modal with customized footer
-        </Button>
-        <Modal
-          visible={visible}
-          title="Title"
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={[
-            <Button key="back" onClick={this.handleCancel}>
-              Return
-            </Button>,
-            <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
-              Submit
-            </Button>,
-            <Button
-              key="link"
-              href="https://google.com"
-              type="primary"
-              loading={loading}
-              onClick={this.handleOk}
-            >
-              Search on Google
-            </Button>,
-          ]}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        Open Modal with customized footer
+      </Button>
+      <Modal
+        visible={visible}
+        title="Title"
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[
+          <Button key="back" onClick={handleCancel}>
+            Return
+          </Button>,
+          <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
+            Submit
+          </Button>,
+          <Button
+            key="link"
+            href="https://google.com"
+            type="primary"
+            loading={loading}
+            onClick={handleOk}
+          >
+            Search on Google
+          </Button>,
+        ]}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal>
+    </>
+  );
+};
 ```
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index b3da33268351..45cb18745b06 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -17,43 +17,37 @@ To customize the text of the buttons, you need to set `okText` and `cancelText`
 import { Modal, Button, Space } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 
-class LocalizedModal extends React.Component {
-  state = { visible: false };
+const LocalizedModal = () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showModal = () => {
-    this.setState({
-      visible: true,
-    });
+  const showModal = () => {
+    setVisible(true);
   };
 
-  hideModal = () => {
-    this.setState({
-      visible: false,
-    });
+  const hideModal = () => {
+    setVisible(false);
   };
 
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showModal}>
-          Modal
-        </Button>
-        <Modal
-          title="Modal"
-          visible={this.state.visible}
-          onOk={this.hideModal}
-          onCancel={this.hideModal}
-          okText="确认"
-          cancelText="取消"
-        >
-          <p>Bla bla ...</p>
-          <p>Bla bla ...</p>
-          <p>Bla bla ...</p>
-        </Modal>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        Modal
+      </Button>
+      <Modal
+        title="Modal"
+        visible={visible}
+        onOk={hideModal}
+        onCancel={hideModal}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>Bla bla ...</p>
+        <p>Bla bla ...</p>
+        <p>Bla bla ...</p>
+      </Modal>
+    </>
+  );
+};
 
 function confirm() {
   Modal.confirm({
diff --git a/components/modal/demo/modal-render.md b/components/modal/demo/modal-render.md
index c9e09e86b219..8a3dc0a76709 100644
--- a/components/modal/demo/modal-render.md
+++ b/components/modal/demo/modal-render.md
@@ -14,111 +14,91 @@ title:
 Custom modal content render. use `react-draggable` implements draggable.
 
 ```jsx
+import { useState, useRef } from 'react';
 import { Modal, Button } from 'antd';
 import Draggable from 'react-draggable';
 
-class App extends React.Component {
-  state = {
-    visible: false,
-    disabled: true,
-    bounds: { left: 0, top: 0, bottom: 0, right: 0 },
-  };
-
-  draggleRef = React.createRef();
+export default () => {
+  const [visible, setVisible] = useState(false);
+  const [disabled, setDisabled] = useState(true);
+  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
+  const draggleRef = useRef();
 
-  showModal = () => {
-    this.setState({
-      visible: true,
-    });
+  const showModal = () => {
+    setVisible(true);
   };
 
-  handleOk = e => {
+  const handleOk = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  handleCancel = e => {
+  const handleCancel = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  onStart = (event, uiData) => {
+  const onStart = (event, uiData) => {
     const { clientWidth, clientHeight } = window.document.documentElement;
-    const targetRect = this.draggleRef.current?.getBoundingClientRect();
+    const targetRect = draggleRef.current?.getBoundingClientRect();
     if (!targetRect) {
       return;
     }
-    this.setState({
-      bounds: {
-        left: -targetRect.left + uiData.x,
-        right: clientWidth - (targetRect.right - uiData.x),
-        top: -targetRect.top + uiData.y,
-        bottom: clientHeight - (targetRect.bottom - uiData.y),
-      },
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
     });
   };
 
-  render() {
-    const { bounds, disabled, visible } = this.state;
-    return (
-      <>
-        <Button onClick={this.showModal}>Open Draggable Modal</Button>
-        <Modal
-          title={
-            <div
-              style={{
-                width: '100%',
-                cursor: 'move',
-              }}
-              onMouseOver={() => {
-                if (disabled) {
-                  this.setState({
-                    disabled: false,
-                  });
-                }
-              }}
-              onMouseOut={() => {
-                this.setState({
-                  disabled: true,
-                });
-              }}
-              // fix eslintjsx-a11y/mouse-events-have-key-events
-              // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
-              onFocus={() => {}}
-              onBlur={() => {}}
-              // end
-            >
-              Draggable Modal
-            </div>
-          }
-          visible={visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          modalRender={modal => (
-            <Draggable
-              disabled={disabled}
-              bounds={bounds}
-              onStart={(event, uiData) => this.onStart(event, uiData)}
-            >
-              <div ref={this.draggleRef}>{modal}</div>
-            </Draggable>
-          )}
-        >
-          <p>
-            Just don&apos;t learn physics at school and your life will be full of magic and
-            miracles.
-          </p>
-          <br />
-          <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <Button onClick={showModal}>Open Draggable Modal</Button>
+      <Modal
+        title={
+          <div
+            style={{
+              width: '100%',
+              cursor: 'move',
+            }}
+            onMouseOver={() => {
+              if (disabled) {
+                setDisabled(false);
+              }
+            }}
+            onMouseOut={() => {
+              setDisabled(true);
+            }}
+            // fix eslintjsx-a11y/mouse-events-have-key-events
+            // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
+            onFocus={() => {}}
+            onBlur={() => {}}
+            // end
+          >
+            Draggable Modal
+          </div>
+        }
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        modalRender={modal => (
+          <Draggable
+            disabled={disabled}
+            bounds={bounds}
+            onStart={(event, uiData) => onStart(event, uiData)}
+          >
+            <div ref={draggleRef}>{modal}</div>
+          </Draggable>
+        )}
+      >
+        <p>
+          Just don&apos;t learn physics at school and your life will be full of magic and miracles.
+        </p>
+        <br />
+        <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
+      </Modal>
+    </>
+  );
+};
 ```
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index d18a76c25a8a..7dd11ee2885d 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -16,57 +16,43 @@ You can use `centered`,`style.top` or other styles to set position of modal dial
 ```jsx
 import { Modal, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    modal1Visible: false,
-    modal2Visible: false,
-  };
-
-  setModal1Visible(modal1Visible) {
-    this.setState({ modal1Visible });
-  }
-
-  setModal2Visible(modal2Visible) {
-    this.setState({ modal2Visible });
-  }
-
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={() => this.setModal1Visible(true)}>
-          Display a modal dialog at 20px to Top
-        </Button>
-        <Modal
-          title="20px to Top"
-          style={{ top: 20 }}
-          visible={this.state.modal1Visible}
-          onOk={() => this.setModal1Visible(false)}
-          onCancel={() => this.setModal1Visible(false)}
-        >
-          <p>some contents...</p>
-          <p>some contents...</p>
-          <p>some contents...</p>
-        </Modal>
-        <br />
-        <br />
-        <Button type="primary" onClick={() => this.setModal2Visible(true)}>
-          Vertically centered modal dialog
-        </Button>
-        <Modal
-          title="Vertically centered modal dialog"
-          centered
-          visible={this.state.modal2Visible}
-          onOk={() => this.setModal2Visible(false)}
-          onCancel={() => this.setModal2Visible(false)}
-        >
-          <p>some contents...</p>
-          <p>some contents...</p>
-          <p>some contents...</p>
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default App;
+export default () => {
+  const [modal1Visible, setModal1Visible] = React.useState(false);
+  const [modal2Visible, setModal2Visible] = React.useState(false);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setModal1Visible(true)}>
+        Display a modal dialog at 20px to Top
+      </Button>
+      <Modal
+        title="20px to Top"
+        style={{ top: 20 }}
+        visible={modal1Visible}
+        onOk={() => setModal1Visible(false)}
+        onCancel={() => setModal1Visible(false)}
+      >
+        <p>some contents...</p>
+        <p>some contents...</p>
+        <p>some contents...</p>
+      </Modal>
+      <br />
+      <br />
+      <Button type="primary" onClick={() => setModal2Visible(true)}>
+        Vertically centered modal dialog
+      </Button>
+      <Modal
+        title="Vertically centered modal dialog"
+        centered
+        visible={modal2Visible}
+        onOk={() => setModal2Visible(false)}
+        onCancel={() => setModal2Visible(false)}
+      >
+        <p>some contents...</p>
+        <p>some contents...</p>
+        <p>some contents...</p>
+      </Modal>
+    </>
+  );
+};
 ```