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

2023-02-11

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

常见的组件库如 MantineChakra 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 组件为例:

对于以上的所有问题,freeCodeCamp 有一篇极其详尽的免费教程 Intermediate TypeScript and React Handbook – How to Build Strongly Typed Polymorphic Components,可以来学习一下。


技术

Authn 与 authz:它们有什么不同?

AuthN 和 AuthZ 分别是 Authentication 和 Authorization 的缩写,傻傻分不清楚。前者是指用户认证,比如是否登录,后者是指用户授权,是指用户是否有权限访问某个资源。

CDN Up and Running

通过从零构建一个 CDN 的方式来了解和学习 CDN 相关内容。

开源

Yao

Yao 是一款使用 Golang 编写的高性能应用引擎,可用于快速开发业务系统、管理后台、低代码平台等。与其他拖拽式的低代码平台不同的是它主要通过编写 JSON 文件来生成页面,并且生成的页面体验很不错。

Lucide

Lucide 是一组高质量的开源图标,支持多种前端框架,fork 自 Feather,所有人都可向该项目贡献。

Tabler Icons

Tabler Icons 也是一组高质量的开源图标,与 Lucide 风格类似,但数量远多于 Lucide。

工具

图压

一款简单易用的图片压缩软件,支持 macOS 和 Windows 系统,在第 10 期推荐的像素丢失的灵感就来源于图压。另外开发图压的公司也有点意思,看上去是个小而美的公司,其他产品做的也都挺不错。

其他

ChatGPT 诞生记:先捞钱,再谈理想| OpenAI 翻身史

最近 ChatGPT 特别火,这篇视频讲叙了 ChatGPT 的诞生以及其背后的 OpenAI 公司的发展历程、成果和争议。