ant design的time picker生成为何是独立于组件外？

Question

asked Feb 5, 2021 in Technique[技术] by 深蓝 (71.8m points)

使用ant design的TimePicker的时候，观察到其生成的div是独立于组件外，在body直接下级．

单个TimePicker dom

一开始以为这样设计是为了复用，但是观察到调用多个TimePicker的时候，还是生成了多个div容器

import { TimePicker } from 'antd';
import moment from 'moment';

ReactDOM.render(
  
    
    
    
  
, mountNode);

多个TimePicker dom

不明白这样设计的原因...

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1.7k views

1 Answer

深蓝 · Answer 1 · 2021-02-05T03:54:31+0000

用vue设计过类似的功能(对话框), 思想应该是一样的.

为什么有多个
每个时间对话框(dialog)要记住每个操作(time组件)选择的日期, 关闭后打开不用重新渲染一遍了(不用重新计算默认选中值), 所以多个.

为什么在外面
定位方便, 不受其他排版的影响, 主要是overflow: hidden, 万一有一个外围的容器是hidden, 那不被隐藏了.