javascript - React.js - 根据媒体查询将共享组件包装在不同的组件中

Question

我正在使用react-responsive为了获取媒体查询，我希望跨屏幕尺寸共享一个组件状态，但使用不同的包装器。

示例:

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} />;
const Mobile    = props => <MediaQuery {...props} maxWidth={767} />;

export class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Desktop>
          <SignUpForm />
        </Desktop>
        <Tablet>
          <SignUpForm />
        </Tablet>
        <Mobile>
          <ReactSwipe>
            <SignUpForm />
          </ReactSwipe>
        </Mobile>
      </div>
    );
  }
}

在这个例子中，我想使用另一个组件<ReactSwipe>封装<SignUpForm /> 。上面的代码有效，但它创建了 SignUpForm 的 3 个实例。 ...如果您调整浏览器大小并命中断点，您已填写的任何表单数据都将丢失，因为 SignUpForm 的新实例负载。如何更改此设置以使用媒体查询，但使用 <SignUpForm /> 的一个实例.

Answer 1

嗯。我不熟悉 MediaQuery，但我会以不同的方式执行此操作。我会编写/找到一个识别当前平台的函数，然后根据该函数进行切换:

const wrappers = {
  desktop: Desktop,
  tablet: Tablet,
  mobile: Mobile, // I'd have this wrapper do the ReactSwipe thing
};

export function App() {
  // returns a string that is one of: 'desktop', 'tablet', 'mobile'
  const platform = findPlatform();
  const Wrapper = wrappers[platform];

  return (
    <Wrapper>
      <SignUpForm />
    </Wrapper>
  );
}

此外，正如您在上面看到的，当函数可以使用时，我从不使用 ES6 类。我尝试尽可能少地使用类(class)。这是个人偏好，但我确实发现它鼓励我编写更简单的代码。

根据询问，这是 findPlatform 的可能(未经测试)实现。我会将其放在自己的模块中，以便在测试期间可以更轻松地对其进行模拟。

function findPlatform() {
  const minTabletSize = 768; // Make this whatever you think is best

  if (!(/Mobi/.test(navigator.userAgent))) {
    return 'desktop';
  }

  if (window.outerHeight > minTabletSize || window.outerWidth > minTabletSize) {
    return 'tablet';
  }

  return 'mobile';
}