🖥 Обработка имён классов в React 🖥 Интерактивные элементы UI имеют более одного состояния отображения. Например, модальное окно может быть открыто или закрыто, а переключатель — включён или выключен. Обычно эти состояния меняют с помощью классов. Работая напрямую с DOM, мы можем использовать classList, который содержит удобные методы для добавления и удаления классов. В React из коробки нет никаких удобств. Свойство className — это всего лишь строка, а строки неудобны для обработки: class Button extends React.Component { render () { const { isPressed, isHovered, label } = this.props; let btnClass = 'btn'; if (isPressed) { // Приходится конкатенировать классы btnClass += ' btn-pressed'; } else if (isHovered) { btnClass += ' btn-over'; } return <button className={btnClass}>{label}</button>; } }; Для решения этой задачи создатели React рекомендуют использовать пакет 'classnames'. Принцип его работы прост. Вместо манипулирования строчкой напрямую, мы формируем правильный объект, который уже будет преобразован в строку: import cn from 'classnames'; class Button extends React.Component { render () { const { isPressed, isHovered, label } = this.props; // Значение — это `true` или `false` // При значении `true` класс включен, при `false` — выключен // `'btn'` — это класс, который будет подставлен в любом случае const btnClass = cn('btn', { 'btn-pressed': isPressed, 'btn-over': !isPressed && isHovered, }); return <button className={btnClass}>{label}</button>; } }; Подставим конкретные значения: const btnClass = cn('btn', { 'btn-pressed': false, 'btn-over': true, }); console.log(btnClass); // 'btn btn-over' Функция cn() принимает на вход любое количество аргументов. Если аргумент имеет строковой тип, то он считается обязательным классом. Если это объект, тогда работает логика, описанная выше: const btnClass = cn('btn', 'another-class', { 'btn-pressed': isPressed, 'btn-over': !isPressed && isHovered, }); @javascript_react