Всем привет!Подскажите, как лучше сделать динамический рендеринг однотипных компонентов(контроллов) по

условию.
Например, есть у меня вышестоящий компонент. Если он имеет значение "A", то нужно отрендерить один набор компонентов, Если значение "B", то другой набор.Эти наборы я описываю в объекте, а потом при переборе в разметке описываю условия, какие именно компоненты рендерить.
Насколько этот метод хорош по вашему мнению? Какие есть практики, структуры данных, как это можно сделать нагляднее?

напиши отдельный функциональный компонент в котором с помощью switch case возвращай нужный элемент

В имеете ввиду внутри map определить один функциональный компонент, который внутри будет за счет конструкции switch case возвращать нужный компонент?

да, у тебя .map будет возвращать Компонент

компонентов очень много, в том и дело.

тогда обратил бы внимание на различие этих компонентов между собой

Да, идея понятна. Но принципиальной разницы делать это с помощью if else или swtich case - внутри отдельного компонента или все вместе, нет. С точки зрения наглядности да, согласен!

что вы имеете в виду?

кек) у тебя реакт при каждом ререндере будет мемоизировать вычисляемое значение того, что рендерить, так что разница есть и в том как оно будет работать и в том насколько аккуратно будет выглядеть JSX

если их отличие будет в том что от типа компонента, внутри него будет рендериться либо кнопка либо инпут, то я бы создал отдельный функц компонент куда прокидывал бы ваше валью лейбл и тип кнопки. Тогда внутри компонента от типа можно было условным оператором рендерить необходимый результат

условный оператор здесь будет выглядеть как говно, если вариантов > 2х

Очень много лишних конструкций и спор выше не о чем. Можно динамически задавать Element и давать ему от TS дженерика пропсы, лучшее решение проблемы.

код написан на JS -> "да надо просто взять другой язык"

И что в сущности ты сказал?

надо найти в JS дженерики, потому что TS'а нет

TS — это основа, к тому же в такой ситуации помогает не выстрелить себе в ногу. Можно взять от React типы и передать элементы в пропсы, очень удобно во всех отношениях. Ну не хочешь нормального совета — не слушай и проигнорируй.

ТС это не основа, это ТС)

чего?

выбор языка на проекте это не то на что может повлиять джун)

Странно, что кто-то пишет без TS'а

о удивительным мир.... а тебе не странно почему вообще используется JS на фронте а не Java?

Вообще неуместное сравнение

Не очень понимаю. TS это про типизацию, а мы про манипулирование данными говорим. Если можно, краткий пример?

Парень, вот тебе обязательно нужен объект для этой задачи? Или ты таким образом передать все данные хочешь?

Мне нужно определить какие данные нужно отрисовать по условию. Не обязательно объект. Но как еще можно можно сделать не представляю.

если у тебя много условий, а не просто по типу switch, То делай if с ранним return.

Вот! А почему бы тебе не рендерить html по тому, что тебе приходить в пропсы?

так он же так и делает по сути

Нет

Я мог бы заготовить каждый template под каждое условие. Просто условий слишком много. И это такой громоздкий вариант. И такое количество кода скажется на объеме итогового бандла.

Ты с ТС минимально знаком?

лучше заготовить отдельно

Знаком. Но причем тут ТС, который работает поверх JS только в редакторе кода. Какую роль он сыграет в данных?

никакой не сыграет, просто поможет ошибок избежать

да

Чем лучше? JSX, что так, что эдак скомпилируется.

вот и я не пойму, причем тут TS

разделишь разные варианты реализации на отдельный компонент. Будет точно меньше путаницы.

Да путаницы собственно никакой и нет. Есть объект, который описывает структуру рендеринга. Нужно лишь пройтись по нему и отрисовать то, что нужно.

Смотри, ты можешь рендерить семантику от пропса, который будет твоим корневым элементом, тебе не нужны будут условия и тот объект, который ты написал. по React.ComponentProps<"input")> ты берешь сразу все типы своего элемента из пропса, спредишь его в свой html тег {...props} и когда ты его используешь где-то на странице — ты от типов, которые ты взял можешь дать ему уже выше placeholder, value, onChange и так далее. Ты сейчас изобретаешь велосипед, который разорвёт твой бандл.

Можно хотя бы минимальный пример? Не совсем понимаю из текста, как это можно реализовать.

мне тоже непонятно было бы круто увидеть пример

Так ты уже у нас всё знаешь, чего мне тебя учить?) Я у тебя учиться должен)

ты из чего такой вывод сделал? ты непонятно обьясняешь, тебя попросили показать пример

Как мне тебе что-то попытаться объяснить, если ты не слушаешь и не пытаешься вникнуть? Ты сам для себя плодишь вопросы, когда ты слишком не понимаешь то, о чем ты говоришь

я понимаю о чем говорю. Тебе следует пояснее выражаться, чтобы не плодились вопросы.

Ну, и о чем?)

Что-то вроде этого?

видимо да

Да, только тут типы не задаются динамически от входящих параметров.

а для чего здесь динамически задавать типы? просто обычный вопрос если что

Будет у тебя один html тег, а типы от него под другой и переиспользуемость никакая?

Вот это нормальный вопрос

вместе с используемым компонентом ты можешь импортировать интерфейс пропсов

У него разные теги button | div, там нужно чтобы от тега шли типы, поэтому так не выйдет задавать тип статически

У тебя же все равно они будут статическими?!

он может описать локально для компонентов Button, Input типы пропсов, и импортировать их для создания модели пропсов собственно

дк а зачем это делать? если тебе все равно нужно рендерить разный JSX в зависимости от какого-то условия в рантайме?

Я же тебе написал выше, что у него 1 компонент и этот 1 компонент нужно сделать максимально переиспользуемым, там не выйдет статически задать типы

У компонента свои типы и когда создаешь структуру, то и описываешь в соответствии с типами

описываешь что?

структуру данных с которыми нужно будет работать

зачем её описывать?

всмысле?