Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Обработка имён классов

Интерактивные элементы 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,
});

Обязательные классы можно задавать и в самом объекте:

const btnClass = cn({
  'btn something-else': true
  'btn-pressed': isPressed,
  'btn-over': !isPressed && isHovered,
});

Иногда имя класса генерируется динамически, тогда можно использовать следующий код:

const buttonType = 'primary';
const btnClass = cn('btn', `btn-${buttonType}`);
console.log(btnClass); // 'btn btn-primary'
// Или что то же самое
// const btnClass = cn({
//   [`btn-${buttonType}`]: true
// });

Дополнительные материалы

  1. classnames (документация)

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».