React 移动端（满足最大宽度条件）下如何隐藏或移除图片

方案1：CSS媒体查询实现（性能最优，优先推荐） #

不需要修改JS逻辑，纯CSS即可实现，适配所有渲染场景，无兼容性问题：

• 首先给需要隐藏的ImageWrapper组件添加自定义类名，示例代码如下：

<ImageWrapper key={image.src} className="hide-when-narrow">
  <img src={getImageUrl(path, image.src)} srcSet={getSrcSet(path, image.src)} alt={image.alt} />
</ImageWrapper>

• 在CSS文件中添加对应媒体查询规则，将max-width的阈值修改为你需要的数值即可：

/* 示例为视口宽度小于等于768px时隐藏，可自行调整阈值 */
@media (max-width: 768px) {
  .hide-when-narrow {
    display: none;
  }
}

如果使用CSS-in-JS方案（比如Styled Components），可以直接把媒体查询规则写在ImageWrapper的样式定义中，不需要额外加类名

方案2：JS动态判断渲染（适合需要完全不加载图片、节省移动端流量的场景） #

如果希望满足条件时图片完全不被加载，直接不渲染组件即可：

// 组件内逻辑，可自行调整max-width的阈值
const shouldHideImage = window.matchMedia('(max-width: 768px)').matches;

// 渲染时判断，满足条件就不输出图片组件
{!shouldHideImage && (
  <ImageWrapper key={image.src}>
    <img src={getImageUrl(path, image.src)} srcSet={getSrcSet(path, image.src)} alt={image.alt} />
  </ImageWrapper>
)}

如果需要窗口大小变化时实时生效，可以给window绑定resize事件，动态更新shouldHideImage的状态值

注意事项 #

• 如果你使用的是SSR/SSG等服务端渲染方案，不要直接用JS判断视口宽度，会出现服务端和客户端渲染不一致的hydration报错，优先使用CSS方案
• 如果需要隐藏的是特定部分图片，可以给图片对象添加自定义标识字段，判断字段符合才添加隐藏类/跳过渲染

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