React.js：基于媒体查询为共享组件包裹不同容器并保留单一实例

这确实是个挺头疼的场景——当你为不同屏幕尺寸分别渲染SignUpForm时，每次断点切换都会创建新的组件实例，之前填写的表单数据自然就没了。咱们的核心目标就是只保留一个SignUpForm实例，根据屏幕尺寸动态切换它的包裹组件，而不是重复渲染组件。

下面给你两种可行的解决方案，适配不同的组件写法：

方案一：类组件中监听窗口尺寸（适配你的现有代码） #

我们可以在App组件内部维护当前屏幕尺寸对应的包裹组件状态，通过监听窗口resize事件动态更新，始终只渲染一次SignUpForm：

import MediaQuery from 'react-responsive';
import ReactSwipe from 'react-swipe';
const Desktop = props => <MediaQuery {...props} minWidth={992} />;
const Tablet = props => <MediaQuery {...props} minWidth={768} maxWidth={991} />;

export class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化时根据当前窗口宽度确定包裹组件
    this.state = {
      currentWrapper: this.getMatchingWrapper(window.innerWidth)
    };
    this.handleWindowResize = this.handleWindowResize.bind(this);
  }

  // 根据宽度返回对应的包裹组件
  getMatchingWrapper(width) {
    if (width >= 992) return Desktop;
    if (width >= 768) return Tablet;
    // 移动端直接返回包裹ReactSwipe的组件
    return ({ children }) => <ReactSwipe>{children}</ReactSwipe>;
  }

  componentDidMount() {
    // 监听窗口尺寸变化
    window.addEventListener('resize', this.handleWindowResize);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    window.removeEventListener('resize', this.handleWindowResize);
  }

  handleWindowResize() {
    const newWrapper = this.getMatchingWrapper(window.innerWidth);
    // 只有包裹组件真的变化时才更新状态，减少不必要的重渲染
    if (newWrapper !== this.state.currentWrapper) {
      this.setState({ currentWrapper: newWrapper });
    }
  }

  render() {
    const Wrapper = this.state.currentWrapper;
    // 只渲染一次SignUpForm，动态切换它的父组件
    return (
      <div>
        <Wrapper>
          <SignUpForm />
        </Wrapper>
      </div>
    );
  }
}

方案二：函数组件中使用useMediaQuery钩子（更简洁） #

如果你的项目可以使用函数组件，react-responsive提供的useMediaQuery钩子能让代码更清爽，它会自动帮你监听窗口尺寸变化：

import { useMediaQuery } from 'react-responsive';
import ReactSwipe from 'react-swipe';

const App = () => {
  // 用钩子获取当前屏幕尺寸的匹配状态
  const isDesktop = useMediaQuery({ minWidth: 992 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 });
  const isMobile = useMediaQuery({ maxWidth: 767 });

  // 根据匹配状态选择包裹组件
  let Wrapper;
  if (isDesktop || isTablet) {
    // 桌面和平板端直接用一个简单的容器包裹
    Wrapper = ({ children }) => <div>{children}</div>;
  } else if (isMobile) {
    Wrapper = ({ children }) => <ReactSwipe>{children}</ReactSwipe>;
  }

  // 同样只渲染一次SignUpForm
  return (
    <div>
      <Wrapper>
        <SignUpForm />
      </Wrapper>
    </div>
  );
};

核心思路说明 #

不管用哪种方案，本质都是让SignUpForm始终保持同一个实例，只是它的父包裹组件随着屏幕尺寸动态切换。这样一来，表单的状态就会被完整保留，不会因为断点切换而丢失了。

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