React / Gatsby -根据屏幕大小呈现不同的组件

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      {window.innerWidth < 768 ? <MobileComponent /> : <DesktopComponent />}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';

const MyComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      mobileImage: file(relativePath: { eq: "mobile.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 768) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      desktopImage: file(relativePath: { eq: "desktop.jpg" }) {
        childImageSharp {
          fluid(minWidth: 769) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `);

  return (
    <div>
      {window.innerWidth < 768 ? (
        <Img fluid={data.mobileImage.childImageSharp.fluid} />
      ) : (
        <Img fluid={data.desktopImage.childImageSharp.fluid} />
      )}
    </div>
  );
};

export default MyComponent;