react.js三级菜单栏
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"));
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇:没有了
- 下一篇:没有了
