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

Question

I'm using react-responsive to get media queries and I want to have one component state being shared across screen sizes, but using different wrappers.

Example:

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>
    );
  }
}

In this example, I want to use another component <ReactSwipe> to encapsulate <SignUpForm /> . The above works, but it's creating 3 instances of SignUpForm ... if you resize the browser and hit a breakpoint any form data you have filled out already will be lost as the new instance of SignUpForm loads. How do I change this to use media queries but one instance of <SignUpForm /> .

Answer 1

Hm. I'm not familiar with MediaQuery, but I'd do this differently. I'd write / find a function that identifies the current platform and then switch based on that:

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>
  );
}

Also, as you'll see above, I never use ES6 classes when a function will do. I try to use classes as infrequently as possible. This is personal preference, but I do find that it encourages me to write simpler code.

As asked, here's a possible (untested) implementation of findPlatform . I'd put this in its own module, so it can be mocked more easily during testing.

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';
}