如何将Material UI的'useMediaQuery‘与类组件一起使用

import React from 'react';
import { useMediaQuery } from '@material-ui/core';

class MyClassComponent extends React.Component {
  render() {
    const isMobile = useMediaQuery('(max-width:600px)');

    // 在render函数中根据媒体查询结果进行逻辑处理
    if (isMobile) {
      return <div>移动设备布局</div>;
    } else {
      return <div>桌面设备布局</div>;
    }
  }
}

import React from 'react';
import { useMediaQuery } from '@material-ui/core';

const withMediaQuery = (Component) => {
  return (props) => {
    const isMobile = useMediaQuery('(max-width:600px)');

    // 将isMobile作为props传递给原始的类组件
    return <Component {...props} isMobile={isMobile} />;
  };
};

class MyClassComponent extends React.Component {
  render() {
    const { isMobile } = this.props;

    // 在render函数中根据媒体查询结果进行逻辑处理
    if (isMobile) {
      return <div>移动设备布局</div>;
    } else {
      return <div>桌面设备布局</div>;
    }
  }
}

// 使用高阶组件转换类组件
const TransformedComponent = withMediaQuery(MyClassComponent);

// 在其他组件中使用转换后的类组件
const MyOtherComponent = () => {
  return <TransformedComponent />;
};