如何在本机反应中将按钮组件添加到抽屉 - Javascript

在本机React应用程序中添加一个具有按钮组件的抽屉是相对简单的。在这篇文章中，我们将介绍如何使用React的Material UI库来实现这一点。让我们开始吧！

安装Material UI

首先，您需要在您的React应用程序中安装Material UI库。您可以使用以下命令行：

npm install @material-ui/core

创建抽屉和按钮组件

接下来，我们将创建一个抽屉和一个按钮组件，以在本机React应用程序中添加按钮组件到抽屉中。在此之前，您需要导入必要的Material UI组件。您可以使用以下代码：

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

现在，我们可以创建一个抽屉和一个按钮组件。这就是我们如何做到的：

function App() {
  const [drawerOpen, setDrawerOpen] = React.useState(false);

  const toggleDrawer = (open) => (event) => {
    if (
      event.type === 'keydown' &&
      (event.key === 'Tab' || event.key === 'Shift')
    ) {
      return;
    }

    setDrawerOpen(open);
  };

  return (
    <div>
      <Button onClick={toggleDrawer(!drawerOpen)}>Open Drawer</Button>
      <Drawer open={drawerOpen} onClose={toggleDrawer(false)}>
        <Button onClick={toggleDrawer(false)}>Close Drawer</Button>
      </Drawer>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了React.useState方法来创建了一个名为drawerOpen的状态。接下来，我们编写了一个名为toggleDrawer的函数，该函数是一个闭包，用来打开/关闭抽屉。最后，我们使用按钮和抽屉组件在页面上显示我们的组件。

运行应用程序

现在，您可以运行您的React应用程序以查看我们的按钮组件和抽屉。运行以下命令：

npm start

这将启动您的应用程序，您可以访问您的应用程序的URL以查看按钮组件和抽屉。

总结

在本文中，我们学习了如何将按钮组件添加到抽屉中。我们使用了React的Material UI库来实现这一目的。我们创建了一个名为toggleDrawer的函数，该函数是一个闭包，用于打开和关闭抽屉。我们还创建了一个名为drawerOpen的状态，以方便我们在组件中控制抽屉的打开和关闭。最后，我们使用了React的Button和Drawer组件来显示我们的组件。