如何根据特定的视口宽度有条件地渲染React组件？

Question

我正在使用 React 构建响应式 Web 应用程序，并且我有一个特定的组件，我想根据视口宽度有条件地渲染该组件。例如，我希望该组件仅显示在宽度大于 768 像素的屏幕上。

我尝试查看 React 文档以获取有关如何实现此目标的指导，但我发现它非常令人困惑。

以下是我的具体情况：

当前方法：我有一个功能组件，我不确定如何有效地访问当前视口宽度。

期望的行为：当视口宽度超过 768 像素时，组件应该渲染，而当视口宽度小于或等于该宽度时，组件不应渲染。

响应式设计工具：我很好奇是否应该将 CSS 媒体查询与 React 结合使用，或者是否有更好的方法在我的 React 组件中使用 JavaScript。

示例：如果可能，我希望能提供演示如何实现此功能的代码片段或示例。 谁能提供一个清晰的解释或示例来说明如何根据 React 中的视口宽度有条件地渲染组件？

Answer 1

为了根据视口宽度有条件地渲染React组件，您可以使用window.innerWidth属性和window.addEventListener方法的组合来监听resize事件。通过这样做，您可以管理组件的状态，以根据当前窗口大小呈现或隐藏它。

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

const ResponsiveComponent = () => {
  const [isVisible, setIsVisible] = useState(window.innerWidth >= 768);

  useEffect(() => {
    const handleResize = () => {
      setIsVisible(window.innerWidth >= 768);
    };

    window.addEventListener('resize', handleResize);

    // Clean up the event listener when the component is unmounted
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <>
      {isVisible && (
        <div>
          <p>This component is only visible when the viewport width is 768px or larger.</p>
        </div>
      )}
    </>
  );
};

export default ResponsiveComponent;