Задать вопрос
@campus1
react

Как можно упростить рендер компонента?

Всем привет. Делаю табы через material ui и мне не очень нравится такая штука:
{value === 0 && <UserActivityJournal data={therapySessionData} />}
{value === 1 && <TherapyActivity data={data} openDetail={this.openSelfDiagnosisQA}/>}
{value === 2 && <LoginHistory userId={userId} />}


Если табов будет 5+ или же 10+ то это будет дико не читабельно

Как можно это упростить?
  • Вопрос задан
  • 71 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer 
renderTab(index) {
  switch(index) {
    case 0:
      return <UserActivityJournal data={therapySessionData} />;
    /* ... */
  }
}

Так вы избежите кучи ненужных проверок, каждый render.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Senior React Developer
DARS • Москва
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Прием WebRTC через Socket io в unity c#
26 апр. 2024, в 13:12
2000 руб./за проект
Настроить AmoCrm для туристического агентства
26 апр. 2024, в 13:06
500 руб./в час
Доработка функционала десктоп приложения (CRM) для Windows
26 апр. 2024, в 13:00
30000 руб./за проект
Ещё заказы