Блог

У меня есть меню пользовательского интерфейса Material следующим образом:

 <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}>
    <MenuItem onClick={handleClose}>Profile</MenuItem>
    <MenuItem onClick={handleClose}>Log Out</MenuItem>
</Menu>
  

и хотите использовать next.js Link теги с надписью MenuItem . Каков наилучший способ сделать это?

Я попробовал следующие вещи:

Следующее не отображает <a> тег, но добавляет href к <li> тегу.

 <Link href={'#'} passHref><MenuItem onClick={handleClose}>Log Out</MenuItem></Link>
  

Я мог бы добавить prop в MenuItem для рендеринга <a> вместо <li> тега, однако, поскольку меню вложено в <ul> tag, я не уверен, что наличие <ul><a>Log Out</a></ul> хорошей идеи

Следующее выдает ошибку

 <MenuItem onClick={handleClose} component={<Link href={'#'}>Log Out</Link>}></MenuItem>
  

Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: object .

Как упоминалось в другом ответе, указание Link тега внутри MenuItem тега будет работать по мере необходимости, и для проблем со стилем вы должны указать textDecoration: 'none' и color: '#000' в Link теге, чтобы избежать подчеркивания и синего цвета Link текста.

 <MenuItem>
   <Link 
      style={{
          textDecoration: 'none', 
          color: '#000'
      }}
      href="#"
   >
    Log Out
   </Link>
</MenuItem>
  

Это то, что сработало для меня, что также отключает «обычную синюю ссылку с подчеркиванием в меню»:

 <MenuItem>
    <Link href="#">
        <a
            style={{
                textDecoration: 'none',
                color: '#000'
            }}
        >
            Profile
        </a>
    </Link>
</MenuItem>
  

Вы можете поместить компонент «Link» внутри компонента «MenuItem».

 <MenuItem><Link href="#">Log Out</Link></MenuItem>
  

Добавьте тег внутри link

 <MenuItem onClick={handleClose} component={<Link href={'#'}><a>Log Out</a></Link>}></MenuItem>
  

Компонент prop внутри <MenuItem> The component used for the root node. Either a string to use a HTML element or a component. — это то, что по умолчанию <li> используется как материал, — говорит представитель пользовательского интерфейса.

Если вы хотите сохранить <ul><li></li></ul> структуру, вы должны вложить свой <Link> компонент внутрь <MenuItem> компонента.

Так что это может быть то, что вы хотели.

 <MenuItem onClick={handleClose}>
  <Link href={'#'}>Log Out</Link>
</MenuItem>
  

Посмотрите, исправит ли это приведенный ниже код, Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object :

 const ALink = ({ url, linkText }) => <Link href={url}>
    <a>{ linkText }</a>
</Link>    
<MenuItem onClick={handleClose} component={ ALink({url: '#', linkText: 'Log Out') }></MenuItem>
  

Я думаю, что другие ответы на самом деле имеют его в обратном направлении, что нарушает нормальную компоновку MenuItem . (Для меня пункты меню стали выше, а текст был слишком низким.) Это сработало намного лучше и не требует попыток изменить <a> тег самостоятельно:

 <NextLink href="#" passHref>
  <MenuItem component="a">
    Log Out
  </MenuItem>
</NextLink>