Как использовать MenuItem в качестве NavLink? - PullRequest
Новая
       51

Как использовать MenuItem в качестве NavLink?

1 голос
/ 11 июля 2019

Я пытаюсь использовать список меню для навигации по моему приложению.Несмотря на то, что приложение и маршруты работают нормально, я получаю некоторые предупреждения в консоли, используя этот фрагмент кода: 

{props.itemList.map((item, index) =>(
        <div key={index}>
          <MenuItem component={NavLink} to={item.to} onClick= 
              {handleClose} activeClassName={classes.topNavLinkActive} 
              className={classes.topNavLink}>
            {item.name}
            <Icon className={classes.navIcon}>{item.icon}</Icon>
          </MenuItem>
        </div>
      ))}

Полученные предупреждения: Предупреждение: сбойный тип пропуска: недопустимая опора component, переданный ForwardRef(ButtonBase).Ожидается тип элемента, который может содержать ссылку.Вы случайно вместо этого предоставили простой компонент функции?

index.js: 1375 Предупреждение: Функциональные компоненты не могут быть предоставлены ссылки.Попытки получить доступ к этой ссылке потерпят неудачу.Вы хотели использовать React.forwardRef ()?

Может кто-нибудь объяснить, почему здесь необходима прямая ссылка?

1 Ответ

0 голосов
/ 14 июля 2019

Похоже, ошибка связана с неправильным использованием свойства component. Документы говорят:

Компонент, используемый для корневого узла. Либо строка для использования элемента DOM, либо компонента.

Согласно API MenuItem , свойство component имеет тип elementType. Файл определения типа показал бы, что он реализует интерфейс JSX.IntrinsicElements (который описывает стандартные теги HTML).

NavLink элемент является компонентом React. Попробуйте вместо этого указать стандартное имя тега html (string) или реальную ссылку на узел DOM.

...