0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Интерактивные элементы UI имеют более одного состояния отображения. Например, модальное окно может быть открыто или закрыто, а переключатель - включён или выключен. Обычно эти состояния меняют с помощью классов.</p>
1
<p>Интерактивные элементы UI имеют более одного состояния отображения. Например, модальное окно может быть открыто или закрыто, а переключатель - включён или выключен. Обычно эти состояния меняют с помощью классов.</p>
2
<p>Работая напрямую с DOM, мы можем использовать classList, который содержит удобные методы для добавления и удаления классов. В React из коробки нет никаких удобств. Свойство className - это всего лишь строка, а строки неудобны для обработки:</p>
2
<p>Работая напрямую с DOM, мы можем использовать classList, который содержит удобные методы для добавления и удаления классов. В React из коробки нет никаких удобств. Свойство className - это всего лишь строка, а строки неудобны для обработки:</p>
3
<p>Для решения этой задачи создатели React рекомендуют использовать пакет<em>classnames</em>. Принцип его работы прост. Вместо манипулирования строчкой напрямую, мы формируем правильный объект, который уже будет преобразован в строку:</p>
3
<p>Для решения этой задачи создатели React рекомендуют использовать пакет<em>classnames</em>. Принцип его работы прост. Вместо манипулирования строчкой напрямую, мы формируем правильный объект, который уже будет преобразован в строку:</p>
4
<p>Подставим конкретные значения:</p>
4
<p>Подставим конкретные значения:</p>
5
<p>Функция cn() принимает на вход любое количество аргументов. Если аргумент имеет строковой тип, то он считается обязательным классом. Если это объект, тогда работает логика, описанная выше:</p>
5
<p>Функция cn() принимает на вход любое количество аргументов. Если аргумент имеет строковой тип, то он считается обязательным классом. Если это объект, тогда работает логика, описанная выше:</p>
6
<p>Обязательные классы можно задавать и в самом объекте:</p>
6
<p>Обязательные классы можно задавать и в самом объекте:</p>
7
<p>Иногда имя класса генерируется динамически, тогда можно использовать следующий код:</p>
7
<p>Иногда имя класса генерируется динамически, тогда можно использовать следующий код:</p>
8
<p>Функция умеет работать с массивами. Массив можно передавать в любом параметре:</p>
8
<p>Функция умеет работать с массивами. Массив можно передавать в любом параметре:</p>
9
9