今天接到一个需求,有两个模块A和模块B,在pc端上看,模块A之后,再是模板B,而在移动端时,则是模块B之后,再是模块A。
对于这个需求,我们很自然的想到的去监听window的resize事件,从而改变dom布局的顺序,以实现这个需求。
准备动工时,突然想到在antd pro项目,我们在内容页,按F12,将网页调成移动适配,发现我们的菜单就自动收缩起来了,这个是怎么实现的呢?我们是不是可以美其名曰借鉴
一下。
有了这个思路之后,就去扒了一下Header.js
是咋实现的,在BasicLayout.js
中,我们看到了一个插件Media
import Media from 'react-media';
<Media query="(max-width: 599px)">
{isMobile => <BasicLayout {...props} isMobile={isMobile} />}
</Media>
我们只需要修改对应的query参数,来限定区分,从而达到不同分辨率下,显示不同
<Media query="(max-width: 768px)">
<Fragment>
{protoLink}
{advantage}
</Fragment>
</Media>
<Media query="(min-width: 769px)">
<Fragment>
{advantage}
<Col lg={{ span: 12, offset: 6 }}><Divider></Divider></Col>
{protoLink}
</Fragment>
</Media>
至此,我们的需求就实现了。
// Media实现的源码
import * as React from "react";
export interface MediaQueryObject {
[id: string]: boolean | number | string;
}
export interface MediaProps {
query: string | MediaQueryObject | MediaQueryObject[];
defaultMatches?: boolean;
children?: ((matches: boolean) => React.ReactNode) | React.ReactNode;
render?: () => React.ReactNode;
targetWindow?: Window;
onChange?: (matches: boolean) => void;
}
/**
* Conditionally renders based on whether or not a media query matches.
*/
declare class Media extends React.Component<MediaProps> {}
export default Media;