当前位置：首页 > React

react的如何调用抽屉组件

2026-01-25 02:32:32React

调用抽屉组件的方法

在React中调用抽屉组件通常使用第三方库如Ant Design或Material-UI，以下是具体实现方式：

使用Ant Design的Drawer组件

安装Ant Design库：

npm install antd

引入Drawer组件并设置状态控制：

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

const App = () => {
  const [visible, setVisible] = useState(false);

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

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

  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        打开抽屉
      </Button>
      <Drawer
        title="基本抽屉"
        placement="right"
        onClose={onClose}
        visible={visible}
      >
        <p>抽屉内容</p>
      </Drawer>
    </>
  );
};

使用Material-UI的Drawer组件

安装Material-UI库：

npm install @mui/material @emotion/react @emotion/styled

实现基础抽屉功能：

import React, { useState } from 'react';
import { Drawer, Button, List, ListItem } from '@mui/material';

const App = () => {
  const [open, setOpen] = useState(false);

  const toggleDrawer = (isOpen) => () => {
    setOpen(isOpen);
  };

  return (
    <div>
      <Button onClick={toggleDrawer(true)}>打开抽屉</Button>
      <Drawer
        anchor="right"
        open={open}
        onClose={toggleDrawer(false)}
      >
        <List>
          <ListItem>项目1</ListItem>
          <ListItem>项目2</ListItem>
        </List>
      </Drawer>
    </div>
  );
};

自定义抽屉组件实现

如需完全自定义抽屉组件，可以创建自己的实现：

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

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

const App = () => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsDrawerOpen(true)}>
        打开自定义抽屉
      </button>
      <CustomDrawer
        isOpen={isDrawerOpen}
        onClose={() => setIsDrawerOpen(false)}
      >
        <h3>自定义抽屉内容</h3>
      </CustomDrawer>
    </div>
  );
};

对应的CSS样式：

.drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: white;
  transition: right 0.3s ease;
  z-index: 1000;
}

.drawer.open {
  right: 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-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}