Является ли безголовый компонент просто нестилизованным компонентом или это нечто большее?

В Интернете уже отделяется стиль от контента, требуя определения стилей
в CSS вместо HTML. Эта архитектура позволяет каждой веб-странице использовать глобальный
стандарт дизайна без определения каких-либо стилей, специфичных для страницы.

По мере того как Интернет превратился в платформу приложений, разработчики искали способы сделать
их растущая кодовая база становится более удобной в сопровождении. В настоящее время де-факто стратегия для
Организация кода приложения заключается в определении небольших, легких компонентов, которые могут
составляться вместе. Таким образом, компонент стал единицей композиции в
современная веб-разработка.

Компоненты часто определяют как HTML, так и CSS в целях инкапсуляции.
Хотя это облегчает их составление, их может оказаться сложнее
целостно интегрироваться в существующую систему дизайна. Это особенно верно
для сторонних компонентов, импортированных от сторонних поставщиков.

Безголовые компоненты решают эту проблему, вновь внося разделение между
содержание и стиль. Однако теперь разделение происходит по границе компонента как
в отличие от HTML и CSS. Они являются ключом к созданию отличного безголового компонента
заключается в разработке интерфейса компонента таким образом, чтобы разработчик мог
четко и легко применять свои собственные стили.

Переслать соответствующие реквизиты

В самом простом смысле безголовый компонент — это просто компонент без стиля.
Разработчики должны иметь возможность применять собственный CSS к элементам HTML, которые
определяет компонент.

Для простых компонентов это может быть просто пересылка имени класса
опорой для корневого элемента, чтобы разработчики могли использовать селекторы классов в своих
CSS.

Если ваш компонент имеет ту же семантику, что и собственный элемент HTML, вы можете использовать
тип ComponentProps из React, чтобы гарантировать, что все соответствующие реквизиты
пересылаемый. Не забудьте опустить все реквизиты, которые вы не хотите, чтобы пользователь
ваш компонент, чтобы иметь возможность переопределить.

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit, 'type'>) {
  return 
}

Предоставление предопределенных классов

Для компонентов, содержащих один или несколько дочерних элементов, разработчики, вероятно,
хотите стилизовать каждый элемент индивидуально.

Одной из стратегий поддержки этого является использование
CSS-комбинаторы.
Например, компонент галереи без заголовка может иметь следующий стиль:

/* Root container */
.gallery {
}

/* Gallery items container */
.gallery > ul {
}

/* Gallery item */
.gallery > ul > li {
}

/* Next and Previous buttons */
.gallery button {
}

Но такой подход создает огромную проблему, поскольку теперь внутренняя структура HTML
компонент является частью его общедоступного API. Это не позволит вам изменить
структуру позже без потенциального нарушения последующего кода.

Лучшая стратегия — заранее определить классы для каждого основного дочернего элемента. Сюда
разработчики могут использовать селекторы классов независимо от какого-либо конкретного HTML
структура:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

Не забудьте добавлять префиксы к классам, чтобы они не конфликтовали с
собственные стили разработчика.

Поддержка пользовательских макетов

Предоставление предопределенных классов, пожалуй, самый быстрый способ дать разработчикам возможность
стиль вашего компонента. Однако недостатком этого подхода является то, что
HTML-структуру нельзя настроить.

Это может не иметь значения. В конце концов, простой HTML уже достаточно гибок в своих
можно визуализировать. Однако иногда разработчики используют дополнительный HTML для того, чтобы
для реализации определенных замыслов. Если вы просмотрите исходный код практически любого
веб-сайте вы можете ожидать увидеть множество несемантических элементов

Вы можете поддержать такие варианты использования, разделив безголовый компонент на
несколько связанных компонентов. Таким образом, разработчики могут добавлять свои собственные
элементы макета в компонент. Например, разработчик может встроить Next и
Предыдущие кнопки из примера галереи в пользовательском контейнере flexbox:

    {data.map((item) => (
      {item.content}
    ))}
  

    

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

Такие компоненты обычно реализуются с использованием
контекст для передачи
данные между собой. Им требуется больше работы по разработке, внедрению и
документ. Однако их универсальность часто означает, что дополнительные усилия
стоило того.

Разрешить переопределение компонентов

Некоторые случаи использования требуют, чтобы макетом управлял безголовый компонент
его дочерних компонентов. Примером может служить иерархическое древовидное представление, которое
позволяет изменять порядок элементов путем перетаскивания. Другим вариантом использования может быть
разрешить одностраничным приложениям заменять элемент привязки по умолчанию на
компонент настраиваемой ссылки, который упрощает маршрутизацию на стороне клиента.

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

  }}
/>

Это дает разработчику полный контроль над тем, что отображается в каждом дочернем элементе.
компонент, в то же время позволяя безголовому компоненту управлять его общим
структура.

Вы даже можете разрешить разработчикам настраивать корневой элемент вашего компонента
через реквизит. Например, этот компонент кнопки позволяет разработчику визуализировать его
как-то еще:

import { type ElementType } from 'react'

function HeadlessButton({ as, ...props }: { as?: ElementType }) {
  const Component = as ?? 'button'
  return 
}

Например, чтобы вспомогательные технологии воспринимали кнопку как ссылку,
разработчик может указать, что элемент привязки должен использоваться для отображения
кнопка:

Actually a link

Краткое содержание

Безголовые компоненты — это гораздо больше, чем просто компоненты, которые ничего не содержат
стили. Отличные безголовые компоненты полностью расширяемы и позволяют разработчику
для настройки всей внутренней структуры HTML.