react-media高阶组件实现媒体查询

开发一个项目需要自适应移动端的，需要每个页面进行媒体查询，比较麻烦，封装一个高阶组件，直接引入即可，方便快捷
步骤如下：
1、先安装依赖：npm install react-media --save
2、建立一个组件文件：HocMedia.js

import React, { Component } from 'react'
import Media from 'react-media'

const HocMedia = Com => props => {
    return (
        <Media query="(max-width:600px)">
            {
                isMobile => <div className="is-mobile">
                    <Com {...props} isMobile={isMobile} />
                </div>
            }
        </Media>
    )
}
export default HocMedia;

3、在需要的页面引入：
如页面 HocPage.js
(1)直接引入：

// 直接引入
class HocPage extends Component {
    render() {
        console.log('this.props===', this.props)
        return (
            <div>
                <h1>HocPage</h1>
            </div>
        );
    }
}
export default HocMedia(HocPage);
//可以链式

(2)使用装饰器引入
@HocCom 这种引入方式需要安装装饰器依赖：
npm install @babel/plugin-proposal-decorators

import React, { Component } from "react";
import HocMedia from "../components/HocMedia";
//引入高阶组件
@HocMedia
class HocPage extends Component {
    render() {
        console.log('this.props===', this.props) //根据设备返回结果值{isMobile: false} or {isMobile: true}
        return (
            <div>
                <h1>HocPage</h1>
            </div>
        );
    }
}

export default HocPage;

补充：
（3）高阶组件可以嵌套使用：
foo2(foo1(Child));
析：foo1接收传入的组件Child，foo2接收的组件：foo1(Child)返回的结果

import React, { Component } from "react";


const foo1 = Cmp => props => {
    console.log('Cmp==props', props)
    return (
        <div className="border" style={{ border: "solid 1px red" }}>
                    <Cmp {...props} />
                </div>
    );
};
const foo2 = Cmp => props => {
    return (
        <div className="border" style={{ border: "solid 1px green", padding: 10 }}>
            <Cmp {...props} />
        </div>
    );
};
class Child extends Component {
    render() {
        return <div>child</div>;
    }
}
class HocPage extends Component {
    render() {
        const Foo = foo2(foo1(Child));
        return (
            <div>
                <h1>HocPage</h1>
                <Foo />
            </div>
        );
    }
}

export default HocPage;