Skip to main content

编码技巧

classaName使用.join(" ")进行列表转化处理​

  <button
    type="button"
    className="bg-red-300 flex flex-row items-center px-4 py-2 text-sm rounded-lg transition-all border-none shadow-lg hover:shadow-md active:scale-105 hover:bg-slate-100 text-slate-800 hover:text-slate-900">
    Count:
    <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold rounded-full">
      {count}
    </span>
  </button>

优点：​

  • 提高可读性

缺点：​

  • 代码长一点
  <button
    onClick={() => increase()}
    type="button"
    className={[
      "flex flex-row",
      "px-4 py-2",
      "items-center",
      "transition-all border-none rounded-lg",
      "bg-red-300 hover:bg-slate-100",
      "shadow-lg hover:shadow-md",
      "text-sm text-slate-800 hover:text-slate-900",
      "active:scale-105"
    ].join(" ")}>
    Count:
    <span
      className={[
        "inline-flex items-center justify-center",
        "w-8 h-4 ml-2 rounded-full",
        "text-xs font-semibold"
      ].join(" ")}>
      {count}
    </span>
  </button>