感情を備えたリストコンポーネントを作成する方法

今週、セントリーでコードリファクタリングを行っている間、プロジェクトと機能の間で一般的になる可能性のある共通のリストコンポーネントが欠落していることがわかりました。だから私はそれを作成し始めましたが、問題は次のとおりです。私たちはセントリーのスタイルに感情を使用し、私はそのドキュメントで説明されている感情の予備的な理解しか持っていません...

…JavaScriptを使用してCSSスタイルを書くためのライブラリ。強力で予測可能なスタイルの組み合わせを提供することに加えて、ソースマッピング、タグ付け、テストユーティリティなどの機能を備えた優れた開発者エクスペリエンスを提供します。文字列とオブジェクトのスタイルがサポートされています。

感情を聞いたことがない場合は、基本的なアイデアは次のとおりです。多くのコンポーネントを備えた大規模なコードベースで作業する場合、CSSのカスケードスタイルシートを制御できるようにしたいと思います。したがって、1つのファイルに.activeクラスがあり、別のファイルに.activeクラスもある完全にスタンドアロンコンポーネントのスタイルに影響を与えないようにしたいとします。

感情は、クラス名にカスタム文字列を追加して、他のコンポーネントと競合しないようにこの問題を解決します。これがHTMLの例を示します。

<div></div>

非常に簡潔ですよね？ただし、CSSモジュールなど、非常に類似した機能を実装できる他の多くのツールやワークフローがあります。

コンポーネントの作成を開始するには、まずプロジェクトに感情をインストールする必要があります。それはあなたの環境と設定に依存するので、私は詳細には触れません。ただし、完了したら、次のような新しいコンポーネントを作成できます。

 「React」からのImport React;
'@emotion/styled'からスタイルのインポート。

const list = styled（ 'ul'） `
  リストスタイル：なし;
  パディング：0;
`;

私たちがやっているだけではないので、これは私には奇妙に見えます<ul></ul>要素はスタイルで書かれており、コンポーネントは<ul></ul>要素。マーカーとスタイルを同時に1か所で組み合わせることは奇妙に感じますが、私はそれのシンプルさが好きです。それは私の心モデルとHTML、CSS、およびJavaScriptの間の懸念の分離を混乱させるだけです。別のコンポーネントでは、これをインポートできます<list></list>そして、このようにそれを使用します：

 「コンポーネント/リスト」からのインポートリスト。

<list>これはリスト項目です。</list>

リストコンポーネントに追加するスタイルは、クラス名（ .oefioauegなど）に変換され、コンポーネントで定義するものに追加されます。<ul></ul>要素で。しかし、私たちはまだ完了していません！リスト設計のためには、同じコンポーネントでレンダリングできる必要があります<ul></ul>そして<ol&gt;</ol&gt;。また、各リストアイテムにアイコンを配置できるバージョンも必要です。このように：感情についてのクールな（そして少し奇妙な）ことは、 as属性を使用してHTML要素を選択してコンポーネントをインポートするときにレンダリングできることです。このプロパティを使用して作成できます<ol&gt;</ol&gt;カスタムタイプの属性やその他のコンテンツを作成することなくバリアント。そして、これは次のように見えます：

<list>これはULを提示します。</list>
<list as="ol&quot;>これはOLを提示します。</list>

これは私にとって奇妙なだけではありませんよね？ただし、タグを変更するためにコンポーネント自体で奇妙なロジックを実行する必要がないことを意味するため、これは非常に賢いです。

この時点で、私はこのコンポーネントの理想的なAPIがどのように見えるかに気付き始めました。なぜなら、そこから戻ることができるからです。これが私が想像したことです：

<list>
  <listitem>アイテム1</listitem>
  <listitem>プロジェクト2</listitem>
  <listitem>プロジェクト3</listitem>
</list>
<list>
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>アイテム1
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>プロジェクト2
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>プロジェクト3
</list>
<list as="ol&quot;>
  <listitem>アイテム1</listitem>
  <listitem>プロジェクト2</listitem>
  <listitem>プロジェクト3</listitem>
</list>

したがって、このスケッチを作成した後、私は2つのコンポーネントが必要であることを知っています。<listitem></listitem>その中にアイコンサブコンポーネントをネストする機能。私たちはこのように始めることができます：

 「React」からのImport React;
'@emotion/styled'からスタイルのインポート。

const list = styled（ 'ul'） `
  リストスタイル：なし;
  パディング：0;
  マージンボトム：20px;

  ol＆{
    カウンターレセット：numberedList;
  }
`;

このスペシャルol&構文は、これらのスタイルが要素にのみレンダリングされていると感情的に伝えるものです<ol&gt;</ol&gt;適用される方法のみ。通常、 background: red;この要素に対して、コンポーネントがコンテンツを正しくレンダリングすることを確認します。次はサブコンポーネントです<listitem></listitem>。 SentryではTypeScriptも使用しているので、私たちは定義していることに注意する必要があります。<listitem></listitem>コンポーネントの前に、最初に小道具を設定する必要があります。

タイプlistitemprops = {
  アイコン？：React.ReactNode;
  子供？：文字列| React.ReactNode;
  classname？：string;
};

今、私たちは私たちのものを追加することができます<iconwrapper></iconwrapper>コンポーネント、そうなります<listitem></listitem>調整<icon></icon>コンポーネントのサイズ。上記の例を覚えているなら、私はそれを次のようにしたいです：

<list>
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>アイテム1
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>プロジェクト2
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>プロジェクト3
</list>

IconBusinessコンポーネントは、包み込みたい既存のコンポーネントです。<span></span>スタイリングできるように。ありがたいことに、アイコンをテキストに正しく整列させるには、小さなCSSだけが必要です。<iconwrapper></iconwrapper>これらはすべて私たちのために処理できます：

タイプlistitemprops = {
  アイコン？：React.ReactNode;
  子供？：文字列| React.ReactNode;
  classname？：string;
};

const iconwrapper = styled（ 'span'） `
  ディスプレイ：Flex;
  マージン右：15px;
  高さ：16px;
  Align-Items：Center;
`;

これを行った後、私たちは最終的にこれら2つのコンポーネントの下に私たちのものを追加できます<listitem></listitem>コンポーネントははるかに複雑ですが。小道具を追加する必要があり、その後、 icon小道具が存在する場合、上記をレンダリングできます<iconwrapper></iconwrapper>、およびその中に渡されたiconコンポーネントをレンダリングします。また、以下のすべてのスタイルを追加して、これらのバリエーションのそれぞれのスタイルを確認できます。

 Export const listitem = styled（（{icon、classname、children}：listitemprops）=>（
  

{icon &&（ {アイコン} ）} {子供たち}

）） ` ディスプレイ：Flex; Align-Items：Center; 位置：相対; パディング左：34px; マージンボトム：20px; / *小さな円とアイコンの配置 */ ＆：前に、 > $ {iconwrapper} { 位置：絶対; 左：0; } ul＆{ 色：＃aaa; / *この擬似は、ULアイテムの小さな円です */ ＆：前に { コンテンツ： ''; 幅：6px; 高さ：6px; ボーダーラジウス：50％; マージン右：15px; 国境：1px solid #aaa; 背景色：透明; 左：5px; トップ：10px; } / *アイコンスタイル */ $ {p => p.icon && ` スパン{ トップ：4px; } / *アイコンが存在する場合、小さな円の擬似を削除します */ ＆：前に { コンテンツ：なし; } `} } /*リストがaとしてレンダリングされている場合

*/ ol＆{ ＆：前に { カウンターインクリメント：numberedlist; コンテンツ：counter（numberedlist）; トップ：3px; ディスプレイ：Flex; Align-Items：Center; justify-content：center; テキストアライグ：センター; 幅：18px; 高さ：18px; フォントサイズ：10px; font-weight：600; 国境：1px solid #aaa; ボーダーラジウス：50％; 背景色：透明; マージン右：20px; } } `;

それでおしまい！感情を使用した比較的単純なビルド<list></list>コンポーネント。しかし、この演習を完了した後、この文法が好きかどうかはまだわかりません。シンプルなことを非常にシンプルにすると思いますが、中型コンポーネントは本来よりもはるかに複雑です。また、それは初心者にとって非常に混乱する可能性があるため、私は少し心配します。

しかし、私はすべてが学習経験だと思います。とにかく、TypeScript、React、およびStylesをある程度読みやすくする方法についての知識を教えてくれたので、この小さなコンポーネントに対処する機会があることを嬉しく思います。

以上が感情を備えたリストコンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。