第13期：强类型的多态组件

多态是一种常见的设计模式，是指为不同数据类型的实体提供统一的接口。在 React 中，多态组件也是常用的组件复用的模式，比如有个 Button 组件默认渲染为 button 标签，但有时我们希望它渲染为 a 标签或 React Router 的 Link 组件，这时就可通过某个 prop 传递一些参数来改变渲染的 DOM 元素。

常见的组件库如 Mantine 和 Chakra UI 都对多态组件支持的很好，多数组件都可以通过传一个 as prop 来改变渲染的 DOM 元素，比如 <Button as="a">Link</Button> 就可以将 Button 组件渲染为 a 标签。另外 MUI 也有多态的能力，不过它的 prop 叫做 component。

要实现一个多态组件也很简单，无非是拿到传进来的 prop，根据 prop 去渲染就好了，最简单的实现如：

const Button = ({ as, children, ...rest }) => {
  const Component = as || 'button';
 
  return <Component {...rest}>{children}</Component>;
};

然而要用 TypeScript 实现一个强类型的多态组件，要考虑的东西就比较多了。还是以上面的 Button 组件为例：

传入的 as 只能是合法的 HTML 标签字符串或 React 组件；
传入的其他 props 也需要校验，比如 as 为 a 时可以传入 href，而 button 则不行；as 为 React Router 的 Link 组件时，to 又是必需的；
还要考虑可传入 ref 时的情况；