创建卡片组件的考量

这是一个 React 中的卡片组件

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

它可能非常有用！如果您最终在应用程序中使用了数百次这个东西，那么您就可以非常轻松地重构应用程序中的少量 HTML。由于那里的类名，您已经在 CSS 中拥有了这种能力，但现在您也拥有了 HTML 控制权。感受它。

但是等等。也许这限制了……一个<h2>？如果在某些用法中它确实应该是一个<h4>呢？那里的方法是什么？也许是一种 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>
  )
}

或者我们强制传递一个级别？

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

或者也许该标题是它自己的组件？

以及围绕该内容的强制段落标签包装器？这有点限制，不是吗？也许它应该是一个<div>，以便它可以在其中包含任意 HTML，例如多个段落。

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

实际上，为什么要用 props 请求内容？处理子组件可能更容易，尤其是在传入的是 HTML 的情况下。

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

我们还可以挑战更多假设。例如，卡片仅用于类名……这不应该更灵活吗？

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

我仍然在那里强制使用card。我们可以删除它，这样就不会假设它，或者构建卡片 API 的另一个方面，提供一种选择退出它的方法。

即使<div>包装器也是武断的。也许可以传入该标签名称，以便您可以将其变成<section>或<article>或任何您想要的。

也许最好什么都不假设，使我们的卡片像这样

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

这样，您就可以自由更改任何想要更改的内容。至少这样，它在保持放松的同时具有灵活性，而不是这种“灵活性”

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

当您同时追求控制和灵活性时，这种极端的 API 化有时会发生。

没有指导的组件模型也可能导致过度组件化，例如

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

可能有充分的理由这样做，或者它可能是组件化的结果，因为它“免费”并且感觉就像在支持它的架构中就是这样做的。

这是一个平衡。如果一个组件过于严格，则存在人们可能不会使用它们的风险，因为它们没有提供他们需要的东西。如果它们过于宽松，人们可能不会使用它们，因为它们没有提供任何价值，而且，即使他们使用了它们，它们也没有提供任何凝聚力。

我在这里没有任何答案，我只是觉得它很有趣。