【新手向 】手把手开发一个易于扩展的 Tabs 组件

在日常的业务开发过程中，笔者发现有很多优秀的组件设计模式，善用这些模式可以有效提升代码的可维护性，但往往很多“新手”开发者还不熟练，导致写出来的代码难以扩展。这篇文章将从零开始分享如何开发一个易于扩展的 Tabs 组件。

下面的内容会尽可能详细地说明用到的知识点，不过这篇文章的重点并不是 Tabs 组件的实现噢😯。

废话少说，先看效果：

在线 codesandbox：codesandbox.io/s/jolly-fro…

效果很简单，每次点击一个 Tab 元素，将内容区域切换成展示相应的内容。类似的场景有很多，有时只是皮肤不一样，但实现逻辑和效果都是相同的。例如 Antd 中的 Tabs 组件：

不考虑过场动画、兼容滚动、动态增减的场景，一个 Tabs 组件其实非常简单，相信大部分人很快就能做出来。

陷阱 🤔

首先，从 UI 的角度思考组件拆分，可以看到很明显每个 Tab 项是重复的，它们都有一个图标、一个名字、两种展示状态，响应点击事件等等。

按照这个思路设计 Tab 组件，代码大概是这样：

interface TabProps extends HTMLAttributes<HTMLElement> {active: boolean;name: string;iconType: Parameters<typeof Icon>["0"]["type"];
}

function Tab(props: TabProps) {const { active, name, iconType, className, ...rest } = props;return (<liclassName={clsx("tab", className, {active: active})}{...rest}><Icon type={iconType} className="icon" />{name}</li>);
} 

我们让 TabProps 继承自 HTMLAttributes<HTMLElement>，那么通用的 props 例如 style/className/onClick 就可以