🔥 Трюк с style в React, который упростит работу с динамическими стилями
Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
Hello!
📌 Что тут происходит:
* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.
Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
Hello!
📌 Что тут происходит:
* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.