Блог

Я пытаюсь создать меню ящика пользовательского интерфейса material (но из-за большого количества ссылок мне нужно, чтобы оно было вложенным). Я нашел здесь именно то, что мне нужно, https://medium.com/gammastack/making-a-nested-sidebar-menu-in-react-f8595031995e (То же, что и меню на сайте material-ui)

Я следовал ему до конца (уже много раз), и я получаю эту ошибку

 ./src/MenuBar.jsx
Module not found: Can't resolve 'material-ui/core/Collapse' in 'C:UsersadejoDesktopMUI-problemnested-menusrc'
 

Мне кажется, что он ищет в папке Src все компоненты mui, а не node_modules (где я думал, что это будет). Я довольно новичок во всем этом и обычно справляюсь с помощью Google, но на этом я застрял. Кто-нибудь может подсказать, как решить эту проблему?

Я не включил код, поскольку он точно такой, как на ссылке. Я изменил только то, что указано в ссылке, я поместил файл MenuItems.json в Src, а все остальное осталось таким, как есть.

Код для строки меню

 import React, { Component } from 'react'
import List from 'material-ui/core/List'
import ListItem from 'material-ui/core/ListItem'
import ListItemText from 'material-ui/core/ListItemText'
import Collapse from 'material-ui/core/Collapse'
import ExpandLess from 'material-ui/icons/ExpandLess'
import ExpandMore from 'material-ui/icons/ExpandMore'
import Drawer from 'material-ui/core/Drawer'
import { withStyles } from 'material-ui/core/styles'
import { Link } from 'react-router-dom'
import menuItems from './menuItems'
const styles = {
  list: {
    width: 250,
  },
  links: {
    textDecoration:'none',
  },
  menuHeader: {
    paddingLeft: '30px'
  }
};
class MenuBar extends Component {
  constructor( props ) {
    super( props )
    this.state = {}
  }
// this method sets the current state of a menu item i.e whether it is in expanded or collapsed or a collapsed state
handleClick( item ) {
    this.setState( prevState => ( 
      { [ item ]: !prevState[ item ] } 
    ) )
  }
// if the menu item doesn't have any child, this method simply returns a clickable menu item that redirects to any location and if there is no child this method uses recursion to go until the last level of children and then returns the item by the first condition.
handler( children ) {
    const { classes } = this.props
    const { state } = this
return children.map( ( subOption ) => {
      if ( !subOption.children ) {
        return (
          <div key={ subOption.name }>
            <ListItem 
              button 
              key={ subOption.name }>
              <Link 
                to={ subOption.url }
                className={ classes.links }>
                <ListItemText 
                  inset 
                  primary={ subOption.name } 
                />
              </Link>
            </ListItem>
          </div>
        )
      }
      return (
        <div key={ subOption.name }>
          <ListItem 
            button 
            onClick={ () => this.handleClick( subOption.name ) }>
            <ListItemText 
              inset 
              primary={ subOption.name } />
            { state[ subOption.name ] ? 
              <ExpandLess /> :
              <ExpandMore />
            }
          </ListItem>
          <Collapse 
            in={ state[ subOption.name ] } 
            timeout="auto" 
            unmountOnExit
          >
            { this.handler( subOption.children ) }
          </Collapse>
        </div>
      )
    } )
  }
render() {
    const { classes, drawerOpen, menuOptions } = this.props
    return (
      <div className={classes.list}>
        <Drawer 
          variant="persistent" 
          anchor="left"
          open
          classes={ { paper: classes.list } }>
          <div>
            <List>
              <ListItem 
                key="menuHeading"
                divider
                disableGutters
              >
                <ListItemText
                className={ classes.menuHeader }
                  inset
                  primary="Nested Menu"
                />
              </ListItem>
            { this.handler( menuItems.data ) }
            </List>
          </div>
        </Drawer>
      </div>
    )
  }
}
export default withStyles(styles)(MenuBar)
 

Спасибо

Пожалуйста, проверьте вашу папку node_modules на наличие папки material-ui. проверьте, является ли это @material-ui или просто material-ui .

ваш импорт неверен. это должно быть следующим образом со знаком @.

например

 import Collapse from '@material-ui/core/Collapse';
 

если у вас недавно установлен material-ui, то это может быть @mui папка с импортом следующим образом

 import Collapse from '@mui/material/Collapse';