在React PWA中实现移动端与桌面端内容的条件渲染

npm install react-device-detect
# 或者
yarn add react-device-detect

import React from 'react';
import { isMobile, isDesktop } from 'react-device-detect';

function App() {
  const renderContent = () => {
    if (isMobile) {
      // 移动端特有的内容或组件
      return (
        <div>
          <h1>欢迎来到移动版应用！</h1>
          <p>这是专为小屏幕设备优化过的内容。</p>
          {/* 移动端专属组件 */}
          <MobileSpecificComponent />
        </div>
      );
    } else if (isDesktop) {
      // 桌面端特有的内容或组件
      return (
        <div>
          <h1>欢迎来到桌面版应用！</h1>
          <p>这是专为大屏幕设备设计的内容。</p>
          {/* 桌面端专属组件 */}
          <DesktopSpecificComponent />
        </div>
      );
    } else {
      // 如果既不是移动也不是桌面（例如平板，如果isTablet未单独处理）
      return (
        <div>
          <h1>通用内容</h1>
          <p>此内容适用于多种设备类型。</p>
        </div>
      );
    }
  };

  return (
    <div className="App">
      {renderContent()}
    </div>
  );
}

// 假设存在这些组件
const MobileSpecificComponent = () => <h2>移动端组件</h2>;
const DesktopSpecificComponent = () => <h2>桌面端组件</h2>;

export default App;

import React, { useState, useEffect } from 'react';

function App() {
  // 定义一个状态来存储当前是否为移动设备
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // 定义一个函数来判断是否为移动设备
    const checkIsMobile = () => {
      // 假设屏幕宽度小于或等于768px为移动设备
      // 你可以根据实际需求调整这个阈值
      setIsMobile(window.innerWidth <= 768);
    };

    // 组件挂载时执行一次判断
    checkIsMobile();

    // 添加事件监听器，在窗口尺寸变化时重新判断
    window.addEventListener('resize', checkIsMobile);

    // 返回一个清理函数，在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []); // 空依赖数组表示这个Effect只在组件挂载和卸载时执行

  const renderContent = () => {
    if (isMobile) {
      // 移动端特有的内容
      return (
        <div>
          <h1>移动端视图</h1>
          <p>此内容专为小屏幕设备优化。</p>
        </div>
      );
    } else {
      // 桌面端特有的内容
      return (
        <div>
          <h1>桌面端视图</h1>
          <p>此内容专为大屏幕设备设计。</p>
        </div>
      );
    }
  };

  return (
    <div className="App">
      {renderContent()}
    </div>
  );
}

export default App;