JSX如何根据尺寸移除父元素？仅用CSS可行吗？媒体查询用什么库？

问题解答 #

• 仅用CSS无法实现真正移除外层DOM节点的需求
  CSS只能控制元素的渲染样式，不能修改实际的DOM树结构。如果你只是要视觉上达到类似效果，可以给.parent设置display: contents，该属性会让外层div不生成任何盒模型，子元素直接继承父级的布局上下文，视觉表现和移除外层div几乎一致。但要注意，这种方案下.parent节点在DOM树中仍然存在，如果你有依赖DOM层级的JS逻辑、无障碍属性读取等场景，会和实际移除节点的效果有差异。
• 如果你需要真正从DOM树中删除.parent节点，必须通过JSX条件渲染实现
  核心逻辑就是：拿到当前是否为移动端视图的状态后，条件返回对应结构：匹配移动端时直接返回两个子元素，否则返回带.parent外层的结构即可。
• JSX检测媒体查询的方案
  你可以不用第三方库，直接用原生window.matchMedia API监听媒体查询变化来实现。如果要更便捷的开箱方案，React生态常用的有react-responsive库，或者如果是React18+项目，也可以用usehooks-ts提供的useMediaQuery hook，都可以快速拿到媒体查询的匹配状态。

内容的提问来源于stack exchange，提问作者Alicia Y