包装(增强)一个第三方 react 组件怎么就那么麻烦?

Dec 5, 20227 min read

此文最后修改于 444 天前,可能包含很多不再适用的废话,阅读需谨慎~

可能有人看到这个标题就不屑一顾,不就是给组件扩展一些 props 吗,这都不会,真是菜!

😄 真有那么简单的话我也不会专门写这篇文章来记录它了。

先看一个最简单的例子

要求给 Button 组件扩展一个 color 属性

TSX
TSX

上边这个例子相信大家都能看懂啥意思,实现起来毫无难度,那考虑下边这种情况呢?

TSX

很多时候原组件都是可以传入 ref 的,如果我们不处理这种情况,那么功能上相比原组件可就是有缺陷了,因为我们封装过程中将 ref 给弄丢了 🐞

解决方案

TSX

这样就完了吗?让我们再考虑下边一种场景,以 antd 的 Input 组件为例

TSX

上边这种 <A.B /> 写法叫做命名空间组件,它的实现很简单,伪代码如下

TSX

那回到我们的 Button 组件,假设它更复杂一些

TSX

将它包装成 EnhancedButton 组件的同时还想兼容原命名空间写法 <EnhancedButton.Group /> 呢?

解决方案

TSX

结语

看似简单的组件包装很可能暗藏着很多细节需要我们注意,特别是当你使用了 typescript 以后,上边这些例子中我使用的都是很简单的类型声明,但是真实开发中我们经常需要包装第三方组件,他们的一些类型声明往往都是充斥着各种泛型,这就需要我们扩展它类型时候还要把原来的类型一并复制过来,就在这样的过程中导致真实的逻辑改动可能还没有 ts 类型代码多 🤷。

最后献上一个我二次包装的 antd Select,可以看到它类型部分看起来是多么糟糕,以后如果有更好的方案继续更新。

TSX

此文章不包含兼容 propTypesdefaultProps 的示例,现在的开发流程中我们并不会用到这俩东西,他们最终会被废弃

浏览量

最后修改于

Dec 5, 2022
Made withbyXiaojun