antd中如何根據屏幕分辨率的不同，而改變dom佈局

今天接到一個需求，有兩個模塊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;