javascript - ReactJS 多级下拉菜单
问题描述
我正在尝试构建一个多级 ReactJs 下拉菜单。我使用以下帖子/代码作为基础:以下帖子和此 jsfiddle 代码作为我的 ReactJs 组件的起点:
class DropdownMenu extends Component {
static propTypes = {
config: PropTypes.array.isRequired
};
getMenuItemTitle = (menuItem, index, depthLevel) => {
return menuItem.title;
};
getMenuItem = (menuItem, depthLevel, index) => {
let title = this.getMenuItemTitle(menuItem, index, depthLevel);
if (menuItem.submenu && menuItem.submenu.length > 0) {
return (
<li>
{title}
<DropdownMenu config={menuItem.submenu} submenu={true} />
</li>
);
} else {
return <li>{title}</li>;
}
};
render = () => {
let { config } = this.props;
let options = [];
config.map((item, index) => {
options.push(this.getMenuItem(item, 0, index));
});
if (this.props.submenu && this.props.submenu === true)
return <ul>{options}</ul>;
return <ul className="dropdown-menu">{options}</ul>;
};
}
export default DropdownMenu;
CSS 文件:
.dropdown-menu {
height: 35px;
list-style: none;
margin: 0;
padding: 0;
float: left;
text-align: center;
}
.dropdown-menu li {
display: inline-block;
position: relative;
float: left;
}
.dropdown-menu li a {
display: inline-block;
width: 200px;
line-height: 35px;
text-decoration: none;
}
.dropdown-menu li li a {
font-size: 12px;
}
.dropdown-menu li:hover {
background: blue;
}
/*--- Sublist Styles ---*/
.dropdown-menu ul {
position: absolute;
display: none;
}
/*--- Hide Sub Sublists ---*/
.dropdown-menu li:hover ul ul {
display: none;
}
/*--- Sublevel UL's display and position on hover ---*/
.dropdown-menu li:hover ul {
display: block;
}
.dropdown-menu li li:hover ul {
margin-left: 200px;
margin-top: -35px;
display: block;
}
nu-li {
padding: 10px;
}
.dropdown-submenu {
position: absolute;
left: 0px;
top: 0px;
}
最后是我的配置文件:
"navItems": [
{
"title": "Option 1",
"submenu": null
},
{
"title": "Option 2",
"submenu": [
{
"title": "Option 2.1",
"submenu": [
{
"title": "Option 2.1.1",
"submenu": null
},
{
"title": "Option 2.1.2",
"submenu": null
}
]
},
{
"title": "Option 2.2",
"submenu": [
{
"title": "Option 2.2.1",
"submenu": null
},
{
"title": "Option 2.2.2",
"submenu": null
}
]
}
]
}
]
我得到一个凌乱的菜单,选项高于其他选项,我确信我错过了一些简单的东西。
如何在真正的多级下拉菜单中打开我的组件?
解决方案
这个问题已经过时了,但为了清楚起见,我在你的问题中添加了一个 jsfiddle。为了使用您的代码,我必须删除您的 propTypes 并在 ReactJS 中使用内部 props,在此处查看更多信息,然后直接渲染它而不是导出它。
然后我看到菜单有点奇怪,菜单项的宽度没有,所以我改变了这个:
.dropdown-menu li {
display: inline-block;
position: relative;
float: left;
}
.dropdown-menu li a {
display: inline-block;
width: 200px;
line-height: 35px;
text-decoration: none;
}
对此:
.dropdown-menu li {
display: inline-block;
position: relative;
float: left;
width: 200px;
line-height: 35px;
text-decoration: none;
}
但是,我没有看到您凌乱的菜单,如果您仍有问题,请告诉我。
推荐阅读
- reverse-proxy - 特使“http_connection_manager”设置问题
- mysql - MySQL 存储库的签名无效
- python - 如何从具有特定字母的列表中查找单词?
- css - 如果不使用 Ionic 5 中的内联样式,则无法设置 ion-img 的高度
- php - 我的 Mac 中的 MYSQL 数据库连接不成功
- reactjs - 如何根据参数路由到不同的组件
- android - “JCenter 即将报废”android lint 警告,替代品是什么?
- javascript - 单击某些文本后如何显示此图像?
- python - Pandas 中 .txt 文件中的单独列
- python - 尝试使用“便携式 python”运行 python 脚本:ModuleNotFoundError: No module named