为什么Visible组件在条件满足时无法隐藏子元素?
在用Ant Design的Visible组件控制侧边栏显示时遇到问题,当屏幕宽度小于768px时应该隐藏侧边栏,但无论怎么调整breakpoint参数,组件始终显示。我尝试过把breakpoint设为sm和xs,甚至直接写媒体查询,但都没效果。代码是这样的:
<ConfigProvider>
<Visible breakpoint={['md', 'lg', 'xl']}>
<Sider>导航菜单</Sider>
</Visible>
后来发现控制台没有报错,但侧边栏在手机模式下依然显示。是不是breakpoint的写法有问题?或者需要配合其他组件使用?
正确的做法是用 Responsive 技术来控制 Sider 的显示隐藏。常见的解决方案是使用 antd 提供的
useBreakpoint钩子来监听响应式断点。你可以这样改:
useBreakpoint 返回的是一个对象,md 表示大于等于768px。你想在小于768px时隐藏,那就只让 md 及以上显示就行。
如果你不用 hooks,也可以直接用 React 的 media query 方案,比如 react-responsive:
总之别折腾 Visible 了,那不是 antd 的组件,文档里都搜不到这个东西。早点换成 useBreakpoint 或 MediaQuery 就解决了。我之前也踩过这坑,以为是有隐藏组件,结果是自己想多了。