javascript - Materialise Sidenav 不使用 React
问题描述
我有一个应用程序,其中登录用户有一个 sidenav,它来自 Materialize css 库。
这是反应组件
import React, {Fragment, useEffect} from 'react'
import {Link} from 'react-router-dom'
// Materialize JS Import
import M from 'materialize-css/dist/js/materialize.min.js'
import "materialize-css/dist/css/materialize.min.css"
// Actions
import {logout, loadUser} from '../../actions/authActions'
const navbarStyles = {
marginLeft: '20px'
}
const Navbar = ({loadUser, logout, auth: {isAuthenticated, loading}}) => {
useEffect(() => {
loadUser()
if(isAuthenticated !== null) {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
}
}, [isAuthenticated])
const onLogout = () => {
logout()
}
return (
<Fragment>
{isAuthenticated && !loading ? (
<Fragment>
<div className="navbar-fixed">
<nav id="nav">
<div className="nav-wrapper teal accent-4">
<Link to="/"><a href="#" className="brand-logo" style={navbarStyles}>Home</a></Link>
<a href="#" data-target="sidenav-overlay" className="sidenav-trigger"><i className="material-icons">menu</i></a>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li><Link to="/upload" className="waves-effect waves-dark" ><i className="small material-icons left">cloud</i>Upload</Link></li>
<li><Link to="/guests/list" className="waves-effect waves-dark" ><i className="small material-icons left">list</i>Guest List</Link></li>
<li><Link to="/apartments" className="waves-effect waves-dark" ><i className="small material-icons left">hotel</i>Apartments</Link></li>
<li><Link to="/keys" className="waves-effect waves-dark" ><i className="small material-icons left">vpn_key</i>Keys</Link></li>
<li><Link to="/logs" className="waves-effect waves-dark" ><i className="small material-icons left">history</i>Logs</Link></li>
<li><a href="#!" className="waves-effect waves-dark" onClick={onLogout}><i className="small material-icons left">power_settings_new</i>Logout</a></li>
</ul>
</div>
</nav>
</div>
<ul className="sidenav" id="sidenav-overlay">
<li><Link to="/upload" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">cloud</i>Upload</Link></li>
<li><Link to="/guests/list" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">list</i>Guest List</Link></li>
<li><Link to="/apartments" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">hotel</i>Apartments</Link></li>
<li><Link to="/keys" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">vpn_key</i>Keys</Link></li>
<li><Link to="/logs" className="waves-effect waves-dark sidenav-close" ><i className="small material-icons left">history</i>Logs</Link></li>
<li><a href="#!" className="waves-effect waves-dark sidenav-close" onClick={onLogout}><i className="small material-icons left">power_settings_new</i>Logout</a></li>
</ul>
</Fragment>
) : (
<div className="navbar-fixed">
<nav id="nav">
<div className="nav-wrapper teal accent-4">
<Link to="/"><a href="#" className="brand-logo" style={navbarStyles}>Home</a></Link>
</div>
</nav>
</div>
)}
</Fragment>
)
}
export default Navbar
我已经检查了 Materialize 实际上将 Sidenav 初始化为元素,但触发器不起作用。此外,如果我调用实例的 .open() 方法,我只会在应用程序上获得深色(sidenav 效果,但导航未显示)。
此外,我在其他组件中使用 Materialize 的方式与其他组件相同,但其他功能也很完美。只有 Sidenav 部分崩溃。
解决方案
您是否尝试使用左侧或右侧抽屉,其中一些菜单项可供用户使用?如果是,那么您可以按照 Material Drawer 的此示例进行操作。
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
const useStyles = makeStyles({
list: {
width: 250,
},
fullList: {
width: 'auto',
},
});
export default function Navbar() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer = (anchor, open) => (event) => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [anchor]: open });
};
const list = (anchor) => (
<div
className={clsx(classes.list, {
[classes.fullList]: anchor === 'top' || anchor === 'bottom',
})}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<div>
{['left', 'right', 'top', 'bottom'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
{list(anchor)}
</Drawer>
</React.Fragment>
))}
</div>
);
}
推荐阅读
- android-studio - Android Studio 代理设置
- angular - 如何将值从一个组件传递给服务以获取 Angular 6 中的第二个组件?
- iis - URL 重写回参考操作 URL 不起作用
- excel - 如何确保宏工作簿在关闭其他工作簿时不会关闭
- dart - Dart:如何有效地初始化依赖于相同计算的多个最终字段?
- c++ - 如何使用 TStyleManager::UnRegisterStyle() 取消注册样式
- git - PyCharm/Git 锁定分支(只读)在切换到另一个后不起作用
- ios - 我无法在 UIViewController 中访问相机
- cognos - 在 cognos 的文本框中显示选定的过滤器
- nhibernate - NHibernate 如何缓存原生查询?