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

Question

[uzi_no_uzi]

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

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



https://codepen.io/anon/pen/KboVLm?editors=1010

Answer 1

[0xD34F]

switch(this.props.cardType) {

Нет, так не надо. Лучше сделайте объект, где ключами будут вот эти cardType, а значениями - вынесенные в отдельные компоненты куски кода из case'ов. Тогда логика выбора что рендерить сократится до... В общем, совсем коротко и просто получится:

const Component = components[this.props.cardType];
return Component && <Component {...this.props} />;

https://jsfiddle.net/ptm0zay7/1/

Answer 2

[gooseNjuice ()]

1) У тебя в компоненте нет ничего, ради чего используются класс (жизненных циклов, состояния и т.д.), в этом случае лучше использовать компонент-функцию
2) Если варианта разметки всего два у тебя, я бы сделал так:
а) прописал бы каждый вариант в отдельный функциональный компонент
б) затем в родительском компоненте, там где рендеринг, вставил бы следующую конструкцию:

{(cardType=='search')?<Component1 img={...} name={...}/>:<Component2 img={...} name={...}/>}

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