antd问题记录

　　首发：antd问题记录 · 语雀
　　为保证最佳的阅读体验，建议前往语雀体验[比心]3.x到5.x版本差异getFieldDecorator改用Form.Item
　　在3.x版本的时候，组件之间可以简单的进行联动，例如Select组件选择其他值之后，与之关联显示的内容会随之变化，但4.20.0版本之后，还需要加一个 Form.useWatch监听字段变化 form校验多个规则显示问题
　　可能会有3种办法，一是rules全部自己写validtor校验，这个方案感觉有点蹩脚但也能用用，不是最佳选择；二是官方推荐的 option；三是也是最简单的加一个 validateFirst。 form校验的callback
　　3.x版本可以使用callback和Promise，到了5.x版本之后，会有error提示：Warning: callback is deprecated. Please return a promise instead.也就是callback已废弃，请使用promise代替。form的label属性ts类型
　　前：string|ReactNode
　　后：ReactNodeSelect、DatePicker等组件出现脱离页面的情况一、场景
　　在开发过程中，会使用很多的Select、DatePicker等组件，当这些组件在可滚动的区域内滚动时，你会发现该组件的选项框也会跟着滚动，产生分离
　　二、解决方法
　　官方给我们提供了getPopupContainer 属性，该属性是菜单渲染的父节点 ，默认是body。只要添加该属性，设置好父节点，就可以解决这种分离。添加getPopupContainer属性// getPopupContainer={(triggerNode: any) => triggerNode.parentNode} // triggerNode：当前元素的节点 // triggerNode.parentNode：最近的父级元素节点 // 在Select、DatePicker、Cascader添加getPopupContainer属性栗子：     triggerNode.parentNode}   >     选项1     选项2       triggerNode.parentNode}     format=＂YYYY-MM-DD＂   />    triggerNode.parentNode}     options={options}   />
　　设置完成之后，发现antd4.x中Select是没有分离的 ，但是DatePicker和Cascader还是会分离。但在3.x是正常的 。打印 三个组件的triggerNode以及triggerNode.parentNode 如下。Select的triggerNode以及triggerNode.parentNode
　　DatePicker和Cascader的triggerNode以及triggerNode.parentNode
　　三个组件的triggerNode.parentNode有差异 ，DatePicker和Cascader直接找到了最外层的p，他的节点还是在最外层，导致分离。
　　解决方法：直接定位到本身节点 ，将getPopupContainer代码修改一番，如下：getPopupContainer={(triggerNode: any) => triggerNode}三、全局设置getPopupContainer　　// 一般来说，项目中会用到很多这种选择组件，那么需要全局配置。  node}>    四、全局配置后，在Modal中使用报错解决
　　全局配置由于版本原因，如果一个项目挂载到不同的站点导致报错，例如p站antd3.0版本和w站antd4.0版本ant3.x版本报错，4.x版本直接空白
　　官方API解释：全局设置getPopupContainer 触发节点，Modal 用法不存在 triggerNode导致报错
　　解决方法： 增加一个判断条件 {     const popupContainer = document.getElementById(＂popupContainer＂) || node;     if (node) {       // 目前只全局处理select和picker分离问题，如其他组件分离此处添加配置       if (         node.className.indexOf(＂ant-select-selector＂) > -1 ||         node.className.indexOf(＂ant-picker＂) > -1 ||         node.className.indexOf(＂anticon-history＂) > -1       ) {         return popupContainer;       }     }     return document.body;   }}   >        {props.children}    附录
　　目前官方正在出解决方法，具体可看：「链接」、「链接」