React 如何判断是移动端还是PC端

在React中，你可以使用`window.innerWidth`属性来获取当前窗口的宽度，并结合媒体查询来判断是移动端还是PC端。下面是一个简单的示例：

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

const MyComponent = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768); // 根据具体的宽度阈值设置移动端判断条件
    };

    // 在组件挂载时添加事件监听器
    window.addEventListener('resize', handleResize);

    // 组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      {isMobile ? <p>移动端</p> : <p>PC端</p>}
    </div>
  );
};

export default MyComponent;

在上述示例中，我们使用了React的`useEffect`钩子函数来在组件挂载时添加窗口大小变化的事件监听器。在事件处理函数中，我们根据窗口的宽度是否小于768像素（可以根据实际情况调整阈值），来设置`isMobile`状态。

在组件的返回值中，根据`isMobile`状态的值来显示相应的内容，如果是移动端，则显示"移动端"，否则显示"PC端"。

这样，当窗口大小发生变化时，React会自动更新`isMobile`状态，并重新渲染组件，从而实现了根据窗口大小判断是移动端还是PC端的功能。