单击 Button 时如何加载 React 组件？

Question

我有一个导航栏按钮，单击该按钮会打开一个抽屉，其中包含解释多个可用产品或解决方案的选项卡。目前，导航栏和抽屉位于一个组件中，以使其能够工作并显示我的最终目标是什么。但是，我想将抽屉组件分开，以便一个文件包含导航栏，一个文件包含抽屉，一个文件包含垂直选项卡，并在单击按钮时渲染抽屉组件。

另外，有没有办法使用 1 个抽屉组件来动态更新选项卡，具体取决于我是否单击“产品”或“解决方案”选项卡？

这是我为此设置的代码沙箱。 https://codesandbox.io/s/mui-click-and-render-components-444rxd?file=/src/index.tsx

Answer 1

您可以通过以下步骤实现此目的：

创建单独的组件：

为导航栏、抽屉和垂直选项卡创建单独的组件。

导航栏组件（Navbar.tsx）：

import React from "react";
import { Button, Toolbar, AppBar } from "@mui/material";

interface NavbarProps {
  onProductsClick: () => void;
  onSolutionsClick: () => void;
}

function Navbar({ onProductsClick, onSolutionsClick }) {
  // Navbar code
}
export default Navbar;

抽屉组件（Drawer.tsx）：

import React from "react";
import { Drawer } from "@mui/material";

interface DrawerProps {
  open: boolean;
  onClose: () => void;
}

function CustomDrawer({ open, onClose, children }) {
  // Drawer code
}
export default CustomDrawer;

父组件：

创建一个管理状态并呈现导航栏、抽屉和垂直选项卡的父组件。

import Navbar from "./Navbar";
import CustomDrawer from "./Drawer";
import ProdVertTabs from "./ProdVertTabs";
import SoluVertTabs from "./SoluVertTabs";

function TopNav() {
  const [productsNav, setProductsNav] = useState(false);
  const [solutionsNav, setSolutionsNav] = useState(false);

  return (
    <Box>
      <Navbar
        onProductsClick={() => setProductsNav(true)}
        onSolutionsClick={() => setSolutionsNav(true)}
      />

      <CustomDrawer open={productsNav} onClose={() => setProductsNav(false)}>
        <ProdVertTabs />
      </CustomDrawer>

      <CustomDrawer open={solutionsNav} onClose={() => setSolutionsNav(false)}>
        <SoluVertTabs />
      </CustomDrawer>
    </Box>
  );
}

您可能需要根据您的用途对此进行一些修改

---