antd中Modal弹框中使用分页出现遮罩闪烁问题解决办法

前言

今天记录的是一个经常使用但又不常出现（忽视）的问题解决办法。

在使用React + antd 开发管理系统的时候，应该经常使用到 Modal 弹框 和 Pagination（分页）功能，那么大家有没有在开发过程中出现一个匪夷所思的问题，就是分页居右触发pageSize切换器的时候，会导致Modal弹框底部遮罩部分出现闪烁的情况，但是居左或者居中显示触发pageSize切换器的时候并不会出现上诉问题，那这是什么原因导致的呢？

如果你也遇到，不妨继续往下看看。

问题

（效果不好，将就着看看就行）

那么就有人可能会问，那么久居左或居中不就好了吗，这样就不会出现闪烁的问题了。

说的没错，但我们在做项目的时候，完成的不仅仅是一个功能，更多的是需要考虑是，使用者在使用这个功能的时候，能带给使用者一种什么样使用体验，这一点是很重要的。

按照我们国人的一个基础使用习惯来说，分页器居右才更符合使用习惯，所以这里最好还是居右显示为好，那么这个问题就不得不面对。

解决办法

经过多次触发测试，发现是切换器出现的瞬间把底部给撑开了，自然就出现了闪烁的问题，那么问题是找到了，怎么解决呢。

这毕竟是别人的框架，不可能直接去改的呀，并且在往仓库里面push的时候也会把node_modules给忽视，那其他人使用的时候不又出现了这个问题，所以不能根治，看来还是要从自己的代码本身去想办法解决。

经过一番折腾，最后还是让我给找到解决的办法，就是在弹框模型中添加一个根节点，给这个根节点设置样式overflow:hidden 即可。

return (
	<Modal
		title="标题"
		open={show}
		onCancel={() => {}}
		keyboard={false}
		footer={null}
		width={'80%'}
		centered={true}
		zIndex={888}
	>
		// overflow: 'hidden' 这是重点
		<div style={{overflow: 'hidden'}}>
		
			// 可以设置 justifyContent: 'flex-end' 居左，居中，居右显示效果，或者采用float，text-align都可以尝试看看到底有什么区别
			<div style={{height: '400px',display: 'flex',alignItems:'flex-end',justifyContent: 'flex-end'}}>
				<Pagination defaultCurrent={6} total={500} />
			</div>
			
		</div>
	</Modal>
)

解决后的效果