html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
<script src="common.js"></script>
<script src="index.js"></script>
</body>
</html>
js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { DatePicker } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const menu = (
<Menu>
<Menu.Item>1</Menu.Item>
<Menu.Item>2</Menu.Item>
<SubMenu title="3">
<Menu.Item>3.1</Menu.Item>
<Menu.Item>3.2</Menu.Item>
<Menu.Item>3.3</Menu.Item>
</SubMenu>
<SubMenu title="4">
<SubMenu title="4.1">
<Menu.Item><a href="https://www.baidu.com">4.1.1</a></Menu.Item>
<Menu.Item>4.2.2</Menu.Item>
<Menu.Item>4.3.3</Menu.Item>
</SubMenu>
<Menu.Item>4.2</Menu.Item>
<Menu.Item>4.3</Menu.Item>
</SubMenu>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Cascading menu <Icon type="down" />
</a>
</Dropdown>
, document.getElementById('root'));
import ReactDOM from 'react-dom';
import './index.css';
import { DatePicker } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const menu = (
<Menu>
<Menu.Item>1</Menu.Item>
<Menu.Item>2</Menu.Item>
<SubMenu title="3">
<Menu.Item>3.1</Menu.Item>
<Menu.Item>3.2</Menu.Item>
<Menu.Item>3.3</Menu.Item>
</SubMenu>
<SubMenu title="4">
<SubMenu title="4.1">
<Menu.Item><a href="https://www.baidu.com">4.1.1</a></Menu.Item>
<Menu.Item>4.2.2</Menu.Item>
<Menu.Item>4.3.3</Menu.Item>
</SubMenu>
<Menu.Item>4.2</Menu.Item>
<Menu.Item>4.3</Menu.Item>
</SubMenu>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Cascading menu <Icon type="down" />
</a>
</Dropdown>
, document.getElementById('root'));