创建卡组件的考虑因素

本文探讨了创建灵活且可重复使用的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 ===“大” &&<h2 id="props-title"> {props.title}</h2> }
      {props.type！==“大” &&<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>
  ）
}

• 单独的标头组件：将标题提取到自己的组件中以进行更好的组织。

• 灵活的内容包装器：使用<div>允许任意HTML内容。<li><p><strong>儿童道具：</strong>接受儿童作为内容而不是<code>content道具，从而实现了更复杂的内容结构。

• 可自定义的类名称：允许用户通过className名称添加自定义类名称。

• 可自定义的外部标签：允许外部标签（当前是<div>）可配置。<p>最终，本文主张采用一种高度灵活但最少有用的方法：</p> <pre class="brush:php;toolbar:false"> const card =（{tag ='div'，className ='card'，... props}）=&gt; { const tag = tag; 返回 （ &lt;tag classname=&quot;{className}&quot;&gt; {props.Children} &lt;/tag&gt; ）； };</pre> <p>这次最终迭代通过允许用户完全通过儿童控制外部标签，班级名称和内容来确定灵活性。本文警告不要过度工程API，强调了过度复杂性的潜力以及在灵活性和可用性之间找到平衡的重要性。作者的结论是强调理想的灵活性水平是仔细考虑的问题，并且在很大程度上取决于预期的用例。</p> </div>