Добавить, удалить, изменить, отключить / включить элементы меню динамически в material-ui и реагировать

Question

Я везде искал этот ответ, но безрезультатно. Например, если у меня есть меню в правом верхнем углу навигационной панели с ДВУМЯ пунктами меню для запуска (1. Вход. 2. Регистрация), и когда пользователь нажимает кнопку «Войти» или «Зарегистрироваться» и заполняет форму, элементы меню меняются на (1 Выход 2. Моя учетная запись). Также могут быть другие пункты меню, которые будут включены / отключены в зависимости от состояния и роли входа в систему.

Я не могу найти ЛЮБОЙ код, который дает пример того, как выполнить sh ЛЮБОЙ из этого, даже как отключить пункт меню динамически. Я новичок в material-ui, но кодирую уже несколько десятилетий. Я могу сделать это с javascript, но хочу, чтобы мы использовали material-ui.

Может ли кто-нибудь помочь с примером того, как это сделать с помощью material-ui и отреагировать

Answer 1

• 1000 *

Я бы сделал это, если бы имел какой-то компонент, который будет генерировать ссылки с помощью такого объекта, как этот:

const links = {
  loggedIn: [{text: "Logout", path: "/logout"}, {text: "myAccount", path: "/dashboard"}],
  loggedOut: [{text: "Login", path: "/login"}, {text: "Register", path: "/register"}] 
}

Тогда у меня была бы переменная для хранения значения, которые меня интересуют в этой ситуации:

const linksToShow = state.user ? links.loggedIn : links.loggedOut

Тогда у меня будет возврат / рендеринг (я не уверен насчет самого компонента, поэтому я опубликую здесь некоторый общий c код ):

<Menu>
  {state.user ? linksToShow.map(link => <Link to={link.path}>{link.text}</Link>)}
</Menu>