Ответ
Модификатор — это дополнительный параметр, который изменяет поведение или внешний вид компонента. Обычно передаётся через пропсы в виде булева значения или строки.
Пример:
<Button primary large /> В компоненте:
function Button({ primary, large }) {
const className = `
button
${primary ? 'button--primary' : ''}
${large ? 'button--large' : ''}
`;
return <button className={className}>Click</button>;
}Используется для:
- Управления стилями (BEM-модификаторы)
- Изменения поведения компонента
- Условного рендеринга
Часто применяется в CSS-in-JS или с CSS-модулями.
Ответ 18+ 🔞
А, слушай, вот эта штука — модификатор. Ну, это такой дополнительный переключатель, который ты компоненту всунуть можешь, чтобы он себя по-другому вёл или выглядел. Типа как кнопке сказать: «Ты теперь не серая мышка, а большая и красная, главная!».
Передаёшь его обычно пропсом, да. Либо true/false, либо строкой какой.
Смотри, вот пример, чтобы совсем понятно стало, как это выглядит на практике:
<Button primary large />А внутри самого компонента Button разбираем эту малину:
function Button({ primary, large }) {
// Вот тут магия и происходит, собираем классы, как конструктор
const className = `
button
${primary ? 'button--primary' : ''}
${large ? 'button--large' : ''}
`;
return <button className={className}>Click</button>;
}Видишь? Если primary прилетел — добавляем класс button--primary. Если large — ну, ты понял, button--large. И всё, компонент сразу другой, ёпта! Без всяких танцев с бубном и переписывания.
Зачем это, спрашивается, нужно? Да овердохуища причин!
- Стили по БЭМу натянуть — это прям классика жанра.
block__element--modifier, и в рот меня чих-пых, красота. - Поведение поменять. Скажем, кнопка
disabledили инпутreadonly. Всё через модификаторы. - Что-то условно показать/спрятать. Прилетел модификатор
isVisible— рендерим, нет — иди нахуй, невидимый.
Особенно кайфово это в связке с CSS-in-JS или CSS-модулями. Там вообще красота — стили изолированы, модификаторы как ключи к ним. В общем, вещь!