ヘッドレスコンポーネントのスタイル設定を容易にする

ヘッドレスコンポーネントは単にスタイルが設定されていないコンポーネントですか? それともそれ以上の意味がありますか?

ウェブでは、スタイルの定義を要求することで、スタイルをコンテンツからすでに分離しています
HTMLではなくCSSで。このアーキテクチャにより、各 Web ページはグローバル
を採用できます。 ページ固有のスタイルを定義せずに標準のデザインを作成します。

Web がアプリケーション プラットフォームに進化するにつれて、開発者は次の方法を模索しました
増大するコードベースの保守性が向上します。現在、
の事実上の戦略 アプリケーション コードを整理することは、次のことができる小さくて軽量なコンポーネントを定義することです
一緒に構成されます。したがって、コンポーネントは
の構成単位となりました。 最新の Web 開発。

コンポーネントは、カプセル化のために HTML と CSS の両方を定義することがよくあります。
これにより作曲が容易になりますが、作曲が難しくなる可能性があります
既存のデザインシステムに一体的に組み込むことができます。これは特に当てはまります
外部ベンダーからインポートされたサードパーティ コンポーネントの場合。

ヘッドレスコンポーネントは、
間の分離を再導入することでこの課題を解決します。 内容もスタイルも。ただし、現在、分離は
のようにコンポーネントの境界に沿っています。 HTML と CSS の間では反対です。これらは、優れたヘッドレス コンポーネントを作成するための鍵となります
開発者が
できるようにコンポーネントのインターフェースを設計することにあります。 独自のスタイルを明確かつ簡単に適用できます。

関連する小道具を転送する

最も基本的な意味では、ヘッドレス コンポーネントは単にスタイルが設定されていないコンポーネントです。
開発者は、
が定義する HTML 要素に独自の CSS を適用できる必要があります。 コンポーネントが定義します。

単純なコンポーネントの場合、これは単に className を転送するだけの問題かもしれません
開発者が
でクラスセレクターを使用できるように、ルート要素にpropします。 CSS。

コンポーネントがネイティブ HTML 要素と同じセマンティクスを持っている場合は、
を使用できます。 React の ComponentProps タイプを使用して、関連するすべての props が
であることを確認します。 転送可能。ユーザーに使用させたくないプロパティは必ず省略してください
コンポーネントをオーバーライドできるようにします。

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit<ComponentProps<'button'>, 'type'>) {
  return <button type="submit" {...props} />
}

事前定義されたクラスを提供する

1 つ以上の子要素を含むコンポーネントの場合、開発者はおそらく次のことを行うでしょう
各要素を個別にスタイルしたい

これをサポートする 1 つの戦略は、
に依存することです。 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 に手を伸ばすこともあります
特定のデザインを実現するため。ほぼすべてのソースコードを表示すると
Web サイトでは、意味のない

が多数表示されることが予想されます。要素、
その唯一の目的は、フレックスまたはグリッド レイアウトを定義し、子を視覚的にグループ化することです
境界線内の要素を削除するか、新しいスタッキング コンテキストを作成します。

ヘッドレスコンポーネントを次のように分割することで、このようなユースケースをサポートできます
複数の関連コンポーネント。このようにして、開発者は独自の
を自由に追加できます。 レイアウト要素をコンポーネントに追加します。たとえば、開発者は Next と
を埋め込むことができます。 カスタム フレックスボックス コンテナー内のギャラリーの例の前のボタン:

<Gallery>
  <GalleryItems className='gallery-items-container'>
    {data.map((item) => (
      <GalleryItem key={item.id}>{item.content}</GalleryItem>
    ))}
  </GalleryItems>
  <div className='gallery-buttons-container'>
    <GalleryPreviousButton>
    <GalleryNextButton>
  </div>
</Gallery>

.gallery-items-container {
}

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

これらの種類のコンポーネントは通常、
を使用して実装されます。 渡すコンテキスト
お互いの間のデータ。設計、実装、
にはさらに多くの作業が必要です 書類。ただし、その結果得られる多用途性は、多くの場合、余分な労力が必要になることを意味します
それだけの価値があります。

コンポーネントの上書きを許可する

少数のユースケースでは、ヘッドレスコンポーネントがレイアウトを管理する必要があります
その子コンポーネントの。例としては、
という階層ツリー ビューが挙げられます。 ドラッグ アンド ドロップで項目を並べ替えることができます。別の使用例は次のとおりです
シングルページアプリケーションがデフォルトのアンカー要素を
に置き換えることを許可します。 クライアント側のルーティングを容易にするカスタム リンク コンポーネント。

An advanced strategy for allowing developers to define custom layouts is to
allow the actual child component being rendered to be overriden via props:

<TreeView
  nodes={[...]}
  components={{
    CustomRow,
    CustomDragPreview: (props) => <div className="drag-preview" {...props} />
  }}
/>

This grants the developer full control over what is rendered in each child
component, while allowing the headless component to manage its overall
structure.

You can even allow developers to customise the root element of your component
via a prop. For example, this button component allows a developer to render it
as something else:

import { type ElementType } from 'react'

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

For example, in order for assistive technology to treat the button like a link,
the developer can specify that an anchor element should be used to render the
button:

<HeadlessButton as="a">Actually a link</HeadlessButton>

Summary

Headless components are much more than components that don't contain any
styles. Great headless components are fully extensible and allow the developer
to customise the entire internal HTML structure.

以上がヘッドレスコンポーネントのスタイル設定を容易にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html define if for while require using class public internal Interface number default this border flex

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。