当前位置：首页 > React

react实现drawer

2026-01-26 14:36:47React

React 实现 Drawer 组件

在 React 中实现 Drawer（抽屉）组件可以通过多种方式完成，以下是几种常见的方法：

使用 Material-UI 库

Material-UI 提供了现成的 Drawer 组件，可以快速实现抽屉效果。

import React from 'react';
import { Drawer, Button } from '@material-ui/core';

function App() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={toggleDrawer}>Toggle Drawer</Button>
      <Drawer anchor="left" open={open} onClose={toggleDrawer}>
        <div style={{ width: 250 }}>
          <p>Drawer Content</p>
        </div>
      </Drawer>
    </div>
  );
}

export default App;

使用 Ant Design 库

Ant Design 也提供了 Drawer 组件，使用方式类似。

import React from 'react';
import { Drawer, Button } from 'antd';

function App() {
  const [visible, setVisible] = React.useState(false);

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button type="primary" onClick={showDrawer}>
        Open Drawer
      </Button>
      <Drawer
        title="Basic Drawer"
        placement="left"
        onClose={onClose}
        visible={visible}
      >
        <p>Drawer Content</p>
      </Drawer>
    </div>
  );
}

export default App;

自定义 Drawer 组件

如果需要完全自定义 Drawer 组件，可以通过 CSS 和 React 状态管理来实现。

import React, { useState } from 'react';
import './Drawer.css';

function Drawer({ children, isOpen, onClose }) {
  return (
    <div className={`drawer ${isOpen ? 'open' : ''}`}>
      <div className="drawer-content">
        <button className="close-button" onClick={onClose}>
          ×
        </button>
        {children}
      </div>
      <div className="drawer-backdrop" onClick={onClose} />
    </div>
  );
}

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Drawer</button>
      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <p>Custom Drawer Content</p>
      </Drawer>
    </div>
  );
}

export default App;

对应的 CSS 文件 Drawer.css：

.drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  background: white;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  z-index: 1000;
}

.drawer.open {
  left: 0;
}

.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.drawer.open + .drawer-backdrop {
  display: block;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

使用第三方动画库

如果需要更复杂的动画效果，可以结合 react-spring 或 framer-motion 等动画库。

react实现drawer

import React from 'react';
import { useSpring, animated } from 'react-spring';

function Drawer({ isOpen, children, onClose }) {
  const props = useSpring({
    transform: isOpen ? 'translateX(0%)' : 'translateX(-100%)',
  });

  return (
    <>
      <animated.div style={props} className="drawer">
        {children}
      </animated.div>
      {isOpen && <div className="backdrop" onClick={onClose} />}
    </>
  );
}

以上方法可以根据项目需求选择适合的方式实现 Drawer 功能。