@AlexKindGeek

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

Всем привет. Делаю табы через material ui и мне не очень нравится такая штука:
{value === 0 && <TabContainer>Item One</TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
{value === 3 && <TabContainer>Item Four</TabContainer>}
{value === 4 && <TabContainer>Item Five</TabContainer>}
{value === 5 && <TabContainer>Item Six</TabContainer>}
{value === 6 && <TabContainer>Item Seven</TabContainer>}


Как можно это избежать (упростить)?

ПРИМЕР
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Кладёте в state массив:

items: [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven' ]

А в render станет так:

<TabContainer>Item {this.state.items[value]}</TabContainer>

UPD. А если добавить в массив ещё и иконки, то и рендеринг Tab'ов тоже упростится.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы