基于屏幕宽度，条件渲染样式组件在包裹内外的最佳实践是什么？

1. 提取公共组件，通过条件控制父容器 #

把需要渲染的样式组件抽成独立单元，只根据屏幕宽度条件切换它的父容器，核心内容只写一次，彻底避免重复代码。

示例代码：

// 抽离公共的样式组件
const StyledContent = () => (
  <div className="styled-content">
    {/* 这里放你的组件内容 */}
  </div>
);

// 主组件
const ParentComponent = () => {
  // 也可以用useMediaQuery钩子替代原生判断，更适配React生命周期
  const isMobile = window.innerWidth < 768;

  return (
    <div className="container">
      {isMobile ? (
        <div className="inner-wrapper">
          <StyledContent />
        </div>
      ) : (
        <StyledContent />
      )}
    </div>
  );
};

2. 用CSS媒体查询控制位置（优先推荐纯布局场景） #

如果只是布局位置的差异，完全不需要在JS里做条件渲染，用CSS媒体查询就能搞定，更轻量化，性能也更好。

示例代码：

// 主组件里直接渲染内容，不需要条件判断
const ParentComponent = () => (
  <div className="container">
    <div className="styled-content">
      {/* 你的组件内容 */}
    </div>
  </div>
);

/* 默认是外部布局样式 */
.styled-content {
  position: absolute;
  top: 0;
  right: 0;
}

/* 移动端切换成内部布局样式 */
@media (max-width: 767px) {
  .styled-content {
    position: static;
    margin: 1rem 0;
  }
}

3. 组合组件模式（适配复杂结构场景） #

如果需要更灵活的结构控制，可以把包裹逻辑抽成独立组件，通过props决定是否包裹内容。

示例代码：

// 专门处理包裹逻辑的组件
const ResponsiveWrapper = ({ isMobile, children }) => {
  return isMobile ? <div className="inner-wrapper">{children}</div> : children;
};

// 主组件
const ParentComponent = () => {
  const isMobile = window.innerWidth < 768;

  return (
    <div className="container">
      <ResponsiveWrapper isMobile={isMobile}>
        <div className="styled-content">
          {/* 你的组件内容 */}
        </div>
      </ResponsiveWrapper>
    </div>
  );
};

总结：纯布局调整优先用CSS媒体查询；如果必须通过JS控制渲染结构，就提取公共组件或用组合组件，核心就是不让相同的组件代码重复出现。

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