React Class ComponentでuseMediaQuery（hook）を使う

課題

現在、ReactでMaterial-UIを利用しているが、コンポーネントは基本的に全部Class Componentを利用している。
一つのコンポーネントで画面のサイズによって、FullScreenか否かを設定しようとしている。
下記のMUIのドキュメントにあるDiagramの例をそのまま利用したいですが、MUIの例は全部Function Componentでできている。
画面のサイズによって、異なるモードの値を設定しないといけないが、これはuseMediaQuery というHookを利用している。

解決策

基本的に上記で解決策が記載されているが、日本語でまとめてみる。

withMediaQuery.js

import React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery';

const withMediaQuery = (queries = []) => Component => props => {
  const mediaProps = {}
  queries.forEach(q => {
    mediaProps[q[0]] = useMediaQuery(q[1])
    console.log(q)
  })
  console.log(mediaProps)
  return <Component {...mediaProps} {...props} />
}

export default withMediaQuery;

まず、Hookを利用したいClass Componentの別ファイルとしてwithMediaQueryというコンポーネントを作る。
このwithMediaQueryというコンポーネント経由で指定のClass Component（以下ではMainというComponent）でuseMediaQueryで取得できる値を利用できるようにする。

Main.js

// まず、先程定義したwithMediaQueryをインポートする
import withMediaQuery from '../Lib/withMediaQuery';

class Main extends React.Component {
   render() {
     // propsとして利用可能。
     console.log(this.props.isMobile)
     return (
       <div> 
       <Dialog fullScreen ={this.props.isMobile}
                                    open={this.state.open}
                                    onClose={this.handleClose}
                                    aria-labelledby="responsive-dialog-title">
                            <DialogTitle id="responsive-dialog-title">
                                    {"Full Image"}
                            </DialogTitle>
                            <DialogActions>
                            <Button autoFocus onClick={this.handleClose}>
                                Close
                            </Button>
                            </DialogActions>
                            </Dialog>
       </div>
     )
   }
}

// 下記のように、MainコンポーネントをExportするときに、withMediaQueryを利用して、prop値として取得した値をこのClass Componentで利用することが可能になる。
export default withRouter(withMediaQuery([['isMobile', theme => theme.breakpoints.down('md'), {
    defaultMatches: true
  }]])(Main));

以上です。