React实例之完善布局菜单（三）

接着上篇的内容继续。规划界面布局。界面分为三个部分，左边为菜单部分，右边上部有个 80 px 高度左右的功能区，下面是主内容区。 依据这个设计，我们进行下面的步骤：

在 SMenu项目中创建一个目录： SLayout, 这个目录里我们存储各种布局，我们先来示例一种，其它的我们根据需要可以自行设计。在这个目录中创建FullPage.jsx 文件

// SLayout/FullPage.jsximport Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';function FullPage({ sideMenu, pageHeader , children }) {return (<Paper className='d-flex overflow-hidden position-absolute w-100 h-100 p-0 m-0'><Box className='h-100'>{sideMenu}</Box><Box className='d-flex overflow-hidden position-relative flex-grow-1'><Box className="d-flex flex-column overflow-auto p-0 m-0 position-relative flex-grow-1 flex-nowrap"><BoxclassName="w-100 p-3 border-bottom"sx={{ height: 68 }}>{ pageHeader }</Box><Box className="p-0 w-100 h-100">{children }</Box></Box></Box></Paper>)
}export default FullPage;

这个没什么好说的，就是主要就是利用Flex的特殊用 Bootstrap 对界面进行布局，没什么难度。

现在我们利用这个布局把所用的元素添加进来。在SMenu项目目录下创建一个测试文件： SideMenuTest.jsx :

// SideMenuTest.jsx
import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
import Box from '@mui/material/Box';
import SideMenu from "./SMenu/SideMenu";
import SToggleButton from './SMenu/_SToggleButton';
import { useSideMenuBadgeUpdate } from './SMenu/_SMenuHooks';
import FullPage from './SLayout/FullPage';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import ToggleThemeButton from './STheme/TaggleThemeButton';function SideMenuTest() {const updateBadge = useSideMenuBadgeUpdate();const onClickHandler = (id, title, idPath, titlePath) => {console.log(id, title, idPath, titlePath);updateBadge(id, 0);}return (<FullPagesideMenu={<SideMenutitle="侧边菜单测试系统"logo="/logo.png"hClick = {()=>{console.log("headerOnClick")}}mClick={onClickHandler} />}pageHeader={<Stackdirection="row"justifyContent="space-between"alignItems="center"spacing={2}className='w-100'><SToggleButton icon={<VerticalSplitIcon />} /><ToggleThemeButton /></Stack>}><Box className="w-100 h-100 d-flex flex-grow-1 justify-content-center align-items-center"><Typography variant='h1'>欢迎来到码蚁基地</Typography></Box></FullPage>)
}export default SideMenuTest;

上面有个按钮组件是切换 Theme 模式的，<ToggleThemeButton/>的功能很简单，就是调用我们先前设计好的 Theme 中的Hook, 这里给出一个示例，供参考。我们在 STheme目录下创建这个组件文件：ToggleThemeButton.jsx

// STheme/TaggleThemeButton.jsximport IconButton from '@mui/material/IconButton';
import useToggleTheme from "./useToggleThemeHook";
import { useTheme } from '@emotion/react';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';function ToggleThemeButton() {const toggleSTheme = useToggleTheme();const theme = useTheme();return (<IconButton sx={{ ml: 1 }} onClick={() => { toggleSTheme(); }} color="inherit">{theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}</IconButton>)
}export default ToggleThemeButton;

是不是很简单。

现在我们在SMenu项目目录下的 App.jsx中引入这个 SideMenuTest 组件就OK 了。如下所示：

import SideMenuTest from "./SideMenuTest";
import SideMenuProvider from "./SMenu/SideMenuProvider";
import sideMenuConfigData from "./menuData";function App() {return (<SideMenuProvider menuData={sideMenuConfigData}><SideMenuTest /></SideMenuProvider>)
}export default App;

现在的目录结构看起来应该是这个样子的：

在这里插入图片描述

你现在运行以后就可以看到一开始所示的动图的效果了。为了查看Badge的效果，我们在 SideMenuProvider中将Badge的初始化值更改一下。这里改成了 30 ，如下所示：

/*** 获取菜单项的id集合, 用于初始化菜单项的徽章,本菜单的每个Item都有一个id属性，用于唯一标识菜单项。* @param menuConfig * @returns */
function initBadge(menuConfig){let ids = {};menuConfig.forEach((element) => {const name = element.id;ids = { ...ids, [name]: 30 };if (element.children) {const children = element.children;children.forEach(el => {const subName = el.id;ids = { ...ids, [subName]: 30 };})}});return ids;
}

注意，我在 SideMenuTest 中传入菜单项点击事件的回调中 是这样写的：

const updateBadge = useSideMenuBadgeUpdate();
const onClickHandler = (id, title, idPath, titlePath) => {console.log(id, title, idPath, titlePath);updateBadge(id, 0); // 单击菜单项后清除 消息提示。 }

现在的效果应该是这样的：

在这里插入图片描述

现在我们已经验证了菜单的功能 ，但是让菜单和路由结合起来才是我们真正的目的。

设计路由界面

根据我之前 React Router相关的内容知识，我们来要准备一个WellCome页面，一个 Page404 页面， 还有一个无数据匹配的空页面。

在App.jsx 文件中，我们做出如下更改和配置：

import SideMenuTest from "./SideMenuTest";
import SideMenuProvider from "./SMenu/SideMenuProvider";
import sideMenuConfigData from "./menuData";
import Typography from '@mui/material/Typography';import {createBrowserRouter,RouterProvider,
} from "react-router-dom";
import Page404 from "./SPages/Page404";
import Wellcome from "./SPages/Wellcome";
import NoMatchRoute from "./SPages/NoMatchRoute";const router = createBrowserRouter([{path: "/",element: <SideMenuTest />,errorElement: <Page404 />,children: [{path: "userCenter",element: <Typography variant='h1'>这是个人中心页面模块</Typography>,},{index: true,element: <Wellcome />},{path: "*",element: <NoMatchRoute />}]},
]);function App() {return (<SideMenuProvider menuData={sideMenuConfigData}><RouterProvider router={router} /></SideMenuProvider>)
}export default App;

我们配置了 Index 路由， 还配置了 * 路由，这个路由是当前路径下子路由没有匹配项时就显示这个路由页面。这几个页面我们可以随便写个组件都行，就像 上面配置 userCenter 中的 element 一样。但是为了美观，我事先设计 了几个页面直接引用也是一样的。

现在路由配置好了，那么我们就要在 SideMenuTest中做一点小小的更改，把主页面展示区改成 Router 的占位符组件, 并配置点击事件。如下所示：

import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
import Box from '@mui/material/Box';
import SideMenu from "./SMenu/SideMenu";
import SToggleButton from './SMenu/_SToggleButton';
import { useSideMenuBadgeUpdate } from './SMenu/_SMenuHooks';
import FullPage from './SLayout/FullPage';
import Stack from '@mui/material/Stack';
import ToggleThemeButton from './STheme/TaggleThemeButton';
import { Outlet, useNavigate } from 'react-router-dom';function SideMenuTest() {const navigate = useNavigate();const updateBadge = useSideMenuBadgeUpdate();const onClickHandler = (id, title, idPath, titlePath) => {console.log(id, title, idPath, titlePath);updateBadge(id, 0);navigate(idPath.join("/"), true);}return (<FullPagesideMenu={<SideMenutitle="侧边菜单测试系统"logo="/logo.png"hClick={() => { navigate("/", true); }}mClick={onClickHandler} />}pageHeader={<Stackdirection="row"justifyContent="space-between"alignItems="center"spacing={2}className='w-100'><SToggleButton icon={<VerticalSplitIcon />} /><ToggleThemeButton /></Stack>}><Box className="w-100 h-100 d-flex flex-grow-1 justify-content-center align-items-center"><Outlet /></Box></FullPage>)
}export default SideMenuTest;

现在我们的效果应该是这样的：

在这里插入图片描述

相当的完美是不是。 至此，你只要多加练习，就一定能熟练的掌握 React 。本教程到此全部结束。

关于我的计划

快要过年了，事比较多，时间实在抽不出来了。可能要停更好几天了。后面我会出一个系列的 Swift UI 的教程和PHP相关的教程。祝大家新年快乐，万事如意。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/667782.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iPhone搞机记录

iPhone搞机记录

-iPhone 8 或以上 设备进入DFU模式的方法&#xff1a; &#xff08;适用&#xff1a;iPhone 8/8 Plus、iPhone X 系列、iPad Pro3 (11-inch)/(12.9-inch)&#xff09; 1.保持设备处于开机或恢复模式下&#xff0c;插入数据线。 2.按一次设备的“音量加键”松开、再按一次“音量…
阅读更多...
aspose-words在linux上安装字体

aspose-words在linux上安装字体

大多数情况下，使用 Aspose.Words 将 DOC 或 DOCX 文档转换为 PDF 格式。如果需要在 Linux 计算机上执行此操作，确保 Aspose.Words 以最佳准确性渲染文档。 最常见的是，需要转换的 DOC 和 DOCX 文档是在 Windows 或 Mac OS 操作系统上使用 Microsoft Word 创建的。因此，DOC…
阅读更多...
C++实战Opencv第二天——色彩空间转换函数和opencv中图像对象创建与赋值（从零开始，保姆教学）

C++实战Opencv第二天——色彩空间转换函数和opencv中图像对象创建与赋值（从零开始，保姆教学）

OpenCV是一个强大的计算机视觉库&#xff0c;使用C作为主要编程语言&#xff0c;对于图像处理和计算机视觉领域具有重要意义。其提供了丰富的功能和算法&#xff0c;使得开发者能够快速实现各种图像处理和计算机视觉应用。OpenCV C为图像处理和计算机视觉领域的开发者提供了一个…
阅读更多...
【实战】阿里智能编码助手通义灵码

【实战】阿里智能编码助手通义灵码

文章目录 前言技术积累通义灵码是什么&#xff1f;Copilot是什么&#xff1f;通义灵码主要功能通义灵码有哪些优势&#xff1f;通义灵码支持语言/工具通义灵码接入方式通义灵码帮助中心 实战演示安装插件行/函数级实时续写自然语言生成代码代码优化单元测试生成代码注释生成解释…
阅读更多...
【RPA】什么是RPA

【RPA】什么是RPA

一、什么是RPA? RPA&#xff0c;全称机器人流程自动化&#xff0c;是一种利用机器人技术实现工作信息与业务交互自动化的过程。它能够按照预先设计的流程&#xff0c;高效地处理大量的工作信息与业务交互&#xff0c;极大地节约了人工成本。如今&#xff0c;RPA已成为智能化软…
阅读更多...
贪心算法篇

贪心算法篇

“靠漫步&#xff0c;将生趣填饱~” 贪心算法简介&#xff1f; 贪心算法&#xff08;Greedy Algorithm&#xff09;&#xff0c;也称为贪婪算法&#xff0c;是一种在解决问题时采取贪心策略的方法。其基本原理是很简单的&#xff1a; “在每个决策点上都选择当下看似最好的选项…
阅读更多...
《动手学深度学习(PyTorch版)》笔记7.1

《动手学深度学习(PyTorch版)》笔记7.1

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…
阅读更多...
shell脚本捕捉被中断信号

shell脚本捕捉被中断信号

1、使用trap命令对信号进行捕捉 #!/bin/bash# 设置捕捉信号的处理函数 trap echo "Received SIGTERM"; exit SIGTERM trap echo "Received SIGINT"; exit SIGINTwhile true; doecho "Running in the background..."sleep 1 done 2、如何定位是…
阅读更多...
FANUC机器人PROF-017从机断开故障报警处理方法总结

FANUC机器人PROF-017从机断开故障报警处理方法总结

FANUC机器人PROF-017从机断开故障报警处理方法总结 情况说明&#xff1a; 机器人安装的是PROFINET板卡&#xff0c;按照手册进行PROFINET配置之后&#xff0c;重启控制柜&#xff0c;此时系统提示&#xff1a;PROF-017 从机断开&#xff0c; 如下图所示&#xff0c; 打电话咨…
阅读更多...
PDF下载添加水印和访问密码

PDF下载添加水印和访问密码

下载接口 ApiOperation(value "下载文件-pdf", notes "下载文件pdf版", httpMethod "GET", response WebResult.class)RequestMapping(value "/downloadPdf", method RequestMethod.GET)public void downloadFilePdf(RequestPar…
阅读更多...
HTML5和CSS3强化知识总结

HTML5和CSS3强化知识总结

HTML5的新特性 HTML5的新增特性主要是针对于以前的不足&#xff0c;增一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题&#xff0c;基本是IE9以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量使用这些新特性。 HTML5新增的语义…
阅读更多...
ubuntu 18.04修改网卡名称

ubuntu 18.04修改网卡名称

1.原来网卡配置 现在要把enp3s0的名称改为eth0 2. 总共修改三个文件 第一个修改 sudo vi /etc/default/grub 添加最后一行 GRUB_CMDLINE_LINUX"net.ifnames0 biosdevname0" 第二个修改sudo vi /etc/udev/rules.d/70-persistent-net.rules 如果没有就新建文件&a…
阅读更多...
uniapp android和微信小程序实现PDF在线预览

uniapp android和微信小程序实现PDF在线预览

在使用uniapp开发移动端时&#xff0c;微信开发者工具里webview能正常打开后端接口返回的pdf文件流。正式发布后&#xff0c;在配置了业务域名和服务器域名的前提下&#xff0c;预览pdf文件却只能看到白屏&#xff0c;因此我猜测微信小程序不能通过webview读取文件流。这个想法…
阅读更多...
python接口自动化（五）--接口测试用例和接口测试报告模板（详解）

python接口自动化（五）--接口测试用例和接口测试报告模板（详解）

简介 当今社会在测试领域&#xff0c;接口测试已经越来越多的被提及&#xff0c;被重视&#xff0c;而且现在好多招聘信息要对接口测试提出要求。区别于传统意义上的系统级别测试&#xff0c;很多测试人员在接触到接口测试的时候&#xff0c;也许对测试执行还可以比较顺利的上手…
阅读更多...
flink实战--flink的job_listener使用解析

flink实战--flink的job_listener使用解析

背景 生产环境可能有如下的需求：当一个flink作业提交完成或者是运行中不定时给我们触发某个接口或发送一个消息，然后我们在做其他的操作，尤其是batch作业。 flink的job_listener就可以满足我们监听flink任务提交和运行状态的需求，具体如何使用本文将全面介绍一下。 注册入…
阅读更多...
C2-Search-Netlas：一款基于Netlas API的强大C2服务器识别与检测工具

C2-Search-Netlas：一款基于Netlas API的强大C2服务器识别与检测工具

关于C2-Search-Netlas C2-Search-Netlas是一款功能强大的命令与控制&#xff08;C2&#xff09;服务器检测工具&#xff0c;该工具使用Java语言开发&#xff0c;基于Netlas API实现其功能&#xff0c;可以帮助广大研究人员轻松快速地识别和检测目标C2服务器的相关信息。 C2-S…
阅读更多...
C++：通过count和find判断vector中是否包含某个数据

C++：通过count和find判断vector中是否包含某个数据

vector本身没有提供可以检测某个数据是否在其中的成员方法&#xff0c;可以使用泛型方法count和find进行检查&#xff1a; #include <iostream> #include <vector> #include <algorithm> using namespace std;int main() {vector<int> d{1, 2, 2, 2, …
阅读更多...
nginx flv模块的使用和源码分析

nginx flv模块的使用和源码分析

这里写自定义目录标题 1. 为什么需要ngx_http_flv_module2. 配置指令3. 加载ngx_http_flv_module 模块4. 源码分析4.1 指令分析4.2 ngx_http_flv_handler处理函数 5. 如何请求flv进行验证6. 思考 1. 为什么需要ngx_http_flv_module 毋庸多说&#xff0c;就是为了提供在线的http…
阅读更多...
Redis之基础篇

Redis之基础篇

Redis简介 Redis是一种基于键值对&#xff08;Key-Value&#xff09;的NoSQL数据库&#xff0c;它支持string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&#xff08;列表&#xff09;、set&#xff08;集合&#xff09;、zset&#xff08;有序集…
阅读更多...
Java后端面试总结

Java后端面试总结

Java语言具有哪些特点？ Java为纯面向对象的语言。它能够直接反应现实生活中的对象。 具有平台无关性。java利用Java虚拟机运行字节码，无论是在Windows、Linux还是MacOS等其它平台对Java程序进行编译，编译后的程序可在其它平台运行。 Java为解释型语言，编译器把Java代码编译…
阅读更多...
最新文章

Copyright @ 2022~2023