Материализация Sidenav не работает с React

Question

У меня есть приложение, в котором вошли в систему. У пользователей есть sidenav, который работает из библиотеки Materialise 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

Я проверил, что Материализация фактически запускает Sidenav в элемент, но триггер не работает. Также, если я вызываю метод экземпляра .open (), я получаю лишь темный оттенок над приложением (эффект sidenav, но nav не отображается).

Кроме того, я использую Materialize таким же образом в других компонентах, но в других функции, и они работают идеально. Вылетает только часть Sidenav.

Answer 1

Вы пытаетесь использовать левый или правый ящик, где некоторые пункты меню будут доступны для пользователя? если да, то вы можете следовать этому примеру для 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>
  );
}