一、产品需求

产品有这样一个需求， 在实时的日期组件左侧添加一个快捷时间范围选择，并且选择后，窗口不会自动关闭。

大致样式长这样：

二、需求拆解

拆解一下这个需求，需要满足三个要点：

① 快捷时间范围选择

② 显示在左侧

③ 选择后时间选择窗口不关闭

三、需求开发

1、antd 原生支持

通过 ranges 可以提供快捷时间范围选择，但是选择后窗口自动关闭。并且 ranges 显示在 下方，而不是左侧。仅仅满足了快捷时间范围选择这一需求。如下：

2、组合 api

那么，我们就要捞一捞 api，看看如何利用现有的 api 满足当前的需求。

第一步思路：

解决选择后，窗口自动关闭的问题。

通过 插槽中的 extrafooter 实现。

第二步思路：

显示在左侧

通过 renderpanel 属性实现。

四、总结

其实从中可以看出，antd 封装组件的一些思路： 

提供了一些完全可以自定义的prop，但实际上，renderpanel 函数是传了默认的参数的。 也就是默认的 rendernode。 也就是说，你可以在当前的样式上添加东西，也可以重新定制。 提供了足够的灵活性和开放性。