Überlegungen zur Erstellung einer Kartenkomponente

Hier ist eine Kartenkomponente in React

const Card = props => {
  return(
    <div className="card">
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  )
}

Das könnte ziemlich nützlich sein! Wenn Sie dieses Ding Hunderte Male verwenden, haben Sie jetzt die Möglichkeit, ein wenig HTML in Ihrer gesamten App ganz einfach zu refaktorieren. Diese Möglichkeit haben Sie bereits in CSS wegen des Klassennamens, aber jetzt haben Sie auch die HTML-Kontrolle. Fühlen Sie es.

Aber warten Sie. Vielleicht schränkt das ein… ein <h2>? Was, wenn das in einigen Verwendungszwecken eigentlich ein <h4> hätte sein sollen? Wie geht man damit um? Vielleicht eine Art API?

const Card = props => {
  return(
    <div className="card">
      {props.type === "big" && <h2>{props.title}</h2>}
      {props.type !== "big" && <h4>{props.title}</h4>}
      <p>{props.content}</p>
    </div>
  )
}

Oder vielleicht erzwingen wir, dass eine Ebene übergeben wird?

const Card = props => {
  const HeaderTag = `h${props.level}`;
  return(
    <div className="card">
      <HeaderTag>{props.title}</HeaderTag>
      <p>{props.content}</p>
    </div>
  )
}

Oder vielleicht ist diese Kopfzeile eine eigene Komponente?

Und eine erzwungene Absatz-Tag-Hülle um diesen Inhalt? Das ist ein wenig einschränkend, nicht wahr? Vielleicht sollte das ein <div> sein, damit es beliebige HTML-Inhalte aufnehmen kann, wie z. B. mehrere Absätze.

const Card = props => {
  return(
    <div className="card">
      <WhateverHeader>{props.title}</WhateverHeader>
      <div>{props.content}</div>
    </div>
  )
}

Eigentlich, warum überhaupt nach Inhalt mit Props fragen? Es ist wahrscheinlich einfacher, mit einer untergeordneten Komponente umzugehen, besonders wenn das, was übergeben wird, HTML ist.

const Card = props => {
  return(
    <div className="card">
      <WhateverHeader>{props.title}</WhateverHeader>
      {children}
    </div>
  )
}

Es gibt noch mehr Annahmen, die wir in Frage stellen könnten. Wie die Karte nur für einen Klassennamen… sollte das nicht flexibler sein?

const Card = props => {
  const classes = `card ${props.className}`;
  return(
    <div className={classes}>
      <WhateverHeader>{props.title}</WhateverHeader>
      {children}
    </div>
  )
}

Ich erzwinge dort immer noch card. Wir könnten das weglassen, damit es nicht angenommen wird, oder einen weiteren Aspekt der Karten-API aufbauen, der eine Möglichkeit bietet, sich davon abzumelden.

Selbst die <div>-Hülle ist anmaßend. Vielleicht könnte dieser Tag-Name übergeben werden, damit Sie ihn in ein <section> oder <article> oder was auch immer Sie wollen, umwandeln können.

Vielleicht ist es besser, überhaupt nichts anzunehmen, und unsere Karte so zu gestalten

const Card = () => {
  return(
    <>
      {children}
    </>
  )
}

Auf diese Weise haben Sie die Freiheit, alles zu ändern, was Sie ändern möchten. Zumindest ist es dann Flexibilität, während man entspannt damit umgeht, anstatt dieser Art von „Flexibilität“

<Card
  parentTag="article"
  headerLevel="3"
  headerTitle="My Card"
  contentWrapper="div"
  cardVariation="extra-large"
  contentContent=""
  this=""
  little=""
  piggy=""
  went=""
  to=""
  market=""
/>

Diese Art von extremer API-Erstellung passiert manchmal, wenn man gleichzeitig nach Kontrolle und Flexibilität strebt.

Ein Komponentenmodell ohne Anleitung kann auch zu Überkomponentisierung führen, wie vielleicht

const Card = props => {
  return(
    <CardWrapperTheme>
      <CardWrapper>
        <CardTitle />
        <CardContent />
        <CardFooter />
      </CardWrapper>
    </CardWrapperTheme>
  )
}

Es kann vollkommen gute Gründe dafür geben, oder es kann das Ergebnis einer Komponentisierung sein, weil sie „kostenlos“ ist und sich einfach so anfühlt, wie es in einer Architektur, die dies unterstützt, gemacht wird.

Es gibt ein Gleichgewicht. Wenn eine Komponente zu streng ist, läuft sie Gefahr, dass die Leute sie nicht verwenden, weil sie ihnen nicht das geben, was sie brauchen. Und wenn sie zu locker ist, werden die Leute sie vielleicht nicht verwenden, weil sie keinen Wert bietet, und selbst wenn sie sie verwenden würden, bieten sie keine Kohäsion.

Ich habe hier keine Antworten, ich finde es einfach faszinierend.