开发一个项目需要自适应移动端的,需要每个页面进行媒体查询,比较麻烦,封装一个高阶组件,直接引入即可,方便快捷
步骤如下:
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;