Сервер возвращает ответ на фронт в виде значений, как изменить стили в зависимости от этих значений?

Question

[Вячеслав]

Всем привет. Только начал изучать JS и получил практическое упражнение, с котором не могу справиться.
Прошу Вашей помощи. В интерфейсе есть поле, куда после запроса на бэк, с бэка возвращает ответ в виде значений по статусу проекта, ну например, статус "корректный", "конфликт", " критичный конфликт".
В зависимости от вернувшегося ответа, требуется задать стили тексту, например, для каждого значения свой цвет, ссылка, подчеркивание и т.д.
Этих значений на фронте нет, их присылает только бэк.
Ну например, по критичному конфликту нужно задать красный цвет.
Как задать стили под каждый вариант ответа от сервера, если на фронте эти значения не хранятся.
описание блока куда возвращает ответ ниже.
Если на моем куске кода непонятно, как это вообще в теории делается?

<div classname="project_info">
<TextField
disabled
value={projectData.statusName}
id=statusName
label="Статус проекта"
onChange={this.changeHandler}
fullwidth
/>

Answer 1

[Дмитрий Беляев]

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

Но если все же стили в каждом конкретном случае определяются сервером, то можно генерировать их на лету. Правда есть проблема, с тем, что такие стили не редактируются через devtools (хотя сейчас может уже что изменилось). Несколько лет назад я сталкивался с подобной задачей, когда стили для некоторых вариантов отображения UI задавались пользователями, я тогда написал вот такой модуль для решения этой задачи:
https://gist.github.com/bingo347/cb8e62606e206c009...

Comments

[Вячеслав]

Дмитрий, верно, набор состояний ограниченный.
Видимо, вот это мне и нужно, описать классами и переключать по ответу от сервера.
Пойду гуглить, как это сделать, спасибо за помощь!

Answer 2

[ThunderCat]

Этих значений на фронте нет, их присылает только бэк.

У вас может не быть ТЕКУЩЕГО состояния, но список всех состояний на фронте должен быть, иначе как вы будете знать как должен выглядеть определенный статус?

Ну или более "извращенный" и имхо не совсем верный вариант - передавать с бэкенда кроме статуса еще и свойства, например класс, который нужно присвоить элементу с данными, или просто цвет для подсветки... Но все равно - на фронте должен быть как минимум создан этот класс, да и вообще такая фигня нарушает разделение данных и отображения. Условно если завтра у вас фронтенд поменяется, то вы будете вынуждены переносить классы из старого отображения. Не то чтобы это было прям большой проблемой, но стоит избегать такого поведения.

Comments

[Вячеслав]

Спасибо за помощь ;)