使用反应钩的简单解决方案

const [width, setWidth] = useState<number>(window.innerWidth);
function handleWindowSizeChange() {
        setWidth(window.innerWidth);
    }
useEffect(() => {
        window.addEventListener('resize', handleWindowSizeChange);
        return () => {
            window.removeEventListener('resize', handleWindowSizeChange);
        }
    }, []);

let isMobile: boolean = (width <= 768);

您可以使用React Device Detect软件包

要安装，您可以使用npm或YARN：

# For NPM:
npm install react-device-detect --save

# For Yarn
yarn add react-device-detect

示例：

import {BrowserView, MobileView} from 'react-device-detect';

const MyComponent = () => {
    return (
        <>
            <BrowserView>
                <h1>This is rendered only in browser</h1>
            </BrowserView>
            <MobileView>
                <h1>This is rendered only on mobile</h1>
            </MobileView>
        </>
    );
};

如果不需要视图，可以使用ismobile进行条件呈现

import {isMobile} from 'react-device-detect';

const MyComponent = () => {
    if(isMobile) {
        return (
            <div> This content is unavailable on mobile</div>
        )
    }
    return (
        <div> content... </div>
    );
};

摘自React Device Detect自述文件，稍作修改