Условие в className?

Question

[Narts]

В сторе хранятся некоторые значения, от которых зависит класс элемента.
Условие реализовал так:

<div className={`item from ${this.props.marker_type === 'from' && 'active'}`}> ... </div>

Правильно ли так делать? Выглядит как костыль, по-моему. Я имею в виду смесь строки и js-выражений
Еще был вариант просто в className вставить функцию, а уже в функции делать проверки, но как по мне, это загромождение кода. Или ошибаюсь?

Comments

[McBernar]

Я тоже так делаю.

Городить методы для работы с классами — ну такоэ. Тем более, что здесь вполне себе декларативный подход: есть проп — есть класс.

[hzzzzl]

Narts

${this.props.marker_type === 'from' ? 'active' : ''}

лучше так, если с &&, то будет добавляться класснейм false

[Yustas Alexu]

classnames? Не, не слышал.

Answer 1

[abberati]

Поставьте classnames или clsx — библиотека в несколько сотен байт предоставит вообще все способы комбинации строк для построения имени класса. Надежно, железобетонно, с документацией и тестами — лучше, чем что угодно, что можете написать вы.

Answer 2

[deight]

Или html-classes, тест производительности