カードコンポーネントを作成するための考慮事項-CSSチュートリアル-php.cn

{props.title}

ホームページ

ウェブフロントエンド

CSSチュートリアル

カードコンポーネントを作成するための考慮事項

William Shakespeare

Apr 09, 2025 am 10:50 AM

カードコンポーネントを作成するための考慮事項

この記事では、柔軟で再利用可能なReactカードコンポーネントを作成するための設計上の考慮事項について説明します。旅は簡単な実装から始まり、その適応性を高めるためのさまざまなアプローチを徐々に調べます。

最初に、基本的なカードコンポーネントが表示されます。

 const card = props => {
  戻る（
    <div classname="card">
      <h2 id="props-title">{props.title}</h2>
      <p>{props.content}</p>
    </div>
  ））
}

ログイン後にコピー

単純なユースケースでは機能的ですが、この設計はすぐに制限を明らかにします。さまざまなヘッダーレベル（H2、H4など）とコンテンツ構造の必要性には、より洗練されたAPIが必要です。いくつかの選択肢が検討されています：

条件付きレンダリング：プロップを使用してヘッダーレベルを制御します。

 const card = props => {
  戻る（
    <div classname="card">
      {props.type === "Big" &&<h2 id="props-title"> {props.title}</h2> }
      {props.type！== "big" &&<h4 id="props-title"> {props.title}</h4> }
      <p>{props.content}</p>
    </div>
  ））
}

ログイン後にコピー

動的ヘッダータグ： levelプロップに基づいてヘッダータグをプログラム的に生成します。

 const card = props => {
  const headertag = `h $ {props.level}`;
  戻る（
    <div classname="card">
       {props.title} {headertag}>
      <p>{props.content}</p>
    </div>
  ））
}

ログイン後にコピー

個別のヘッダーコンポーネント：ヘッダーを独自のコンポーネントに抽出して、より良い組織化します。
柔軟なコンテンツラッパー： aを使用します<div>任意のHTMLコンテンツを許可します。<li><p><strong>子どもの小道具：</strong>子供を<code>content小道具の代わりにコンテンツとして受け入れ、より複雑なコンテンツ構造を可能にします。
カスタマイズ可能なクラス名：ユーザーがclassNameプロップを介してカスタムクラス名を追加できるようにします。
カスタマイズ可能な外側タグ：外側のタグを許可します（現在a<div> ）構成可能である。<p>最終的に、この記事は、非常に柔軟でありながら最小限の意見のあるアプローチについて主張しています。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> const card =（{tag = 'div'、classname = 'card'、... props}）=> { const tag = tag; 戻る（ <tag classname="{className}"> {props.children} </tag> ）; };</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この最終的な反復は、ユーザーが子供を通じて完全に外側のタグ、クラス名、コンテンツを制御できるようにすることにより、柔軟性を優先します。この記事は、APIを過剰に設計することに注意し、過度の複雑さの可能性と柔軟性と使いやすさのバランスを見つけることの重要性を強調しています。著者は、理想的なレベルの柔軟性は慎重な検討の問題であり、予想されるユースケースに大きく依存することを強調することで結論付けています。</p> </div>