如何使 Ant design 抽屉组件宽度自适应

在使用 Ant Design 的抽屉（Drawer）组件时，我们希望它的宽度可以根据视窗（viewport）的大小动态变化，以提供更好的响应式用户体验。要实现这个功能，我们可以结合使用 CSS 媒体查询和 React 的状态管理。

步骤 1: 设置抽屉组件的基本宽度

首先，我们需要在 React 组件中设置一个基本的宽度状态，这个宽度将作为抽屉组件的初始宽度。

jsx
import React, { useState, useEffect } from 'react';
import { Drawer } from 'antd';

function ResponsiveDrawer() {
  const [drawerWidth, setDrawerWidth] = useState(300); // 设置初始宽度为 300px

  return (
    <Drawer
      title="示例抽屉"
      placement="right"
      width={drawerWidth}
    >
      <p>这是抽屉内容...</p>
    </Drawer>
  );
}

export default ResponsiveDrawer;

步骤 2: 使用媒体查询动态调整宽度

接下来，我们可以使用 window.matchMedia 或者 CSS 中的 @media 查询来侦听视窗大小的变化，并根据不同的屏幕尺寸调整抽屉的宽度。

jsx
function ResponsiveDrawer() {
  const [drawerWidth, setDrawerWidth] = useState(300);

  useEffect(() => {
    function updateWidth() {
      if (window.innerWidth < 480) {
        setDrawerWidth(280); // 对于极小设备，抽屉宽度设置为280px
      } else if (window.innerWidth < 768) {
        setDrawerWidth(320); // 对于小型设备，抽屉宽度设置为320px
      } else {
        setDrawerWidth(400); // 对于中型及以上设备，抽屉宽度设置为400px
      }
    }

    window.addEventListener('resize', updateWidth);
    updateWidth(); // 初始化时也需要调用一次以设置正确的宽度

    return () => {
      window.removeEventListener('resize', updateWidth);
    };
  }, []);

  return (
    <Drawer
      title="示例抽屉"
      placement="right"
      width={drawerWidth}
    >
      <p>这是抽屉内容...</p>
    </Drawer>
  );
}

export default ResponsiveDrawer;

解释

在上述示例中，我们首先通过 useState Hook 设置了一个 drawerWidth 状态来存储当前抽屉的宽度。然后，我们使用 useEffect Hook 来添加一个监听浏览器窗口大小变化的事件处理器。每当窗口大小发生变化时，我们会根据当前的窗口宽度来调整抽屉的宽度，以适应不同的设备。

通过这种方式，无论用户是在手机、平板还是大屏幕设备上浏览你的网站，抽屉组件都能提供适合的用户体验。