Практические шаблоны React: динамическое моделирование
Я столкнулся с этим паттерном, работая со своей командой в Mozilla, поэтому не могу полностью приписать себе его заслуги. Однако я нашел этот метод работы с компонентами слишком простым и элегантным, чтобы им не поделиться. Короче говоря, это отличный способ управления компонентом, который использует большое количество стилевых реквизитов. Этот шаблон поможет вам сопоставить параметры пропса с вашими файлами SCSS чистым и масштабируемым способом.
Прежде чем углубиться в сорняки, идеальной установкой для этого шаблона является TypeScript (мы будем использовать перечисления) и модули React CSS (используя перечисления для точного определения значений в объекте стилей).
Если вы нетерпеливы, как я, вы можете прокрутить вниз до кода, его легко понять, если вам интересно, что и почему, оставайтесь.
Проблема
Передо мной стояла задача создать библиотеку компонентов React, конечно, нам нужны кнопки в библиотеке, поэтому я начал с этого. Я быстро понял, что простая кнопка, которая должна охватывать все аспекты того, чем кнопка «может быть», не так уж и проста. У нас есть только «первичный» и «вторичный» стили кнопок, но и первичный, и вторичный стили инкапсулируют «сплошной», «контурный» и «четкий» тип. Не говоря уже о том, что у каждого есть стили :focus, :disabled, :hover. Ах да, и у нас есть светлый и темный режим. Да, а также кнопки будут иметь варианты «маленький», «средний» и «большой». Это много.
В дополнение к тому, чтобы запихнуть весь этот функционал в один компонент, я также хотел сделать реализацию кнопки, со стороны DX, предельно простой. Библиотека компонентов хороша настолько, насколько легко ею пользоваться.
Реализация
Написав много плохого кода, я вернулся к чертежной доске. Одна вещь, которую я считал правильным в своем плохом коде, заключалась в том, что у меня было несколько довольно хороших перечислений, которые обрисовывали в общих чертах названия всех кнопок. У меня также был довольно чистый SCSS. Меня поразило, что с моими перечислениями и моим SCSS был почти идеальный шаблон один к одному. С небольшой настройкой я мог бы сделать его идеальным и использовать JSX в качестве посредника для моего перечисления и SCSS для связи.
Я не был большим поклонником того, как React обрабатывает CSS, но стили, импортированные как объект, открыли двери для большего количества возможностей. В этом случае у меня были стили, которые я хотел, и перечисления, но как я мог связать их с мирами? Хорошая старая скобка!
Код
Сначала у нас есть категории и размеры кнопок, объявленные в перечислениях.
Вот пример основной кнопки «сплошной» и разбивки стилей размера в SCSS. Посмотрите на перечисление ButtonCategoriesE, чтобы получить представление о том, как будут выглядеть все остальные классы CSS.
Компонент Button будет иметь, помимо прочего, реквизиты категории и реквизита размера. Мне нравится устанавливать значения по умолчанию для наиболее вероятного сценария, в данном случае это будет кнопка «сплошной/средний».
Использование компонента «Кнопка» стало очень мощным благодаря всего двум элементам стиля. Это пример кнопки «контурная/большая».
Надеюсь, вы нашли этот шаблон полезным. Оставьте комментарий, если вы считаете, что это было здорово, или, с другой стороны, есть несколько предложений, чтобы сделать его лучше!
Продолжайте учиться
