@uzi_no_uzi

Как рендерить определенную разметку в зависимости от условия?

Имеется такой React компонент, меняет разметку в зависимости от условия(в примере разметка одинаковая, т.к. тестил, еще не успел поменять), не хочется выносить другую разметку в отдельный компонент, т.к. по сути используются одни и те же данные да и это одна логическая часть, нет смысла выносить.

Но я получаю ошибку

5c2f8d21edbaa554907146.jpeg

https://codepen.io/anon/pen/KboVLm?editors=1010
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 1
gooseNjuice
@gooseNjuice
JavaScript Fullstack
1) У тебя в компоненте нет ничего, ради чего используются класс (жизненных циклов, состояния и т.д.), в этом случае лучше использовать компонент-функцию
2) Если варианта разметки всего два у тебя, я бы сделал так:
а) прописал бы каждый вариант в отдельный функциональный компонент
б) затем в родительском компоненте, там где рендеринг, вставил бы следующую конструкцию:
{(cardType=='search')?<Component1 img={...} name={...}/>:<Component2 img={...} name={...}/>}

В принципе, в React данные так и передаются - по всему дереву сверху вниз. Других вариантов нет.
3) HOC (он же компонент высшего порядка) - компонент, который содержит логику, принимает презентационный компонент, и рендерит его, передавая свои данные. В одном случае будет принимать первый твой компонент с разметкой, в другом - второй.
А делать switch прям на месте - к сожалению, уменьшает читабельность и реюзабельность кода.
Ответ написан
Ваш ответ на вопрос

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

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