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"));
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 笔试面试题9--指针和引用的区别
- 下一篇： 使用CMD命令和管道获取MAC地址
