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，一经查实，立即删除！

相关文章

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下测试通过&…
阅读更多...
FANUC机器人PROF-017从机断开故障报警处理方法总结

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

FANUC机器人PROF-017从机断开故障报警处理方法总结 情况说明&#xff1a; 机器人安装的是PROFINET板卡&#xff0c;按照手册进行PROFINET配置之后&#xff0c;重启控制柜&#xff0c;此时系统提示&#xff1a;PROF-017 从机断开&#xff0c; 如下图所示&#xff0c; 打电话咨…
阅读更多...
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;也许对测试执行还可以比较顺利的上手…
阅读更多...
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…
阅读更多...
Redis之基础篇

Redis之基础篇

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

随机图论基础

一&#xff0c;随机图、随机图空间 1&#xff0c;随机图 一个n个点的无向图&#xff0c;最多有sn(n-1)/2条边。 每条边都有一定的概率存在&#xff0c;有一定概率不存在&#xff0c;那么每个图都有一个出现概率。 2&#xff0c;随机图空间 一共有2^s种不同的图&#xff0c…
阅读更多...
[word] word怎么让字在横线上居中 #学习方法#媒体#媒体

[word] word怎么让字在横线上居中 #学习方法#媒体#媒体

word怎么让字在横线上居中 word怎么让字在横线上居中&#xff1f; 在word文档中&#xff0c;有时为了某些字句突出显示&#xff0c;需要用下划线来表示&#xff0c;当着重显示部分为金额、面积或某些选项时&#xff0c;需要一条长下划线上左右有空白&#xff0c;而文字在下划…
阅读更多...
【vscode】windows11在vscode终端控制台中打印console.log()出现中文乱码问题解决

【vscode】windows11在vscode终端控制台中打印console.log()出现中文乱码问题解决

1. 问题描述 在前端开发过程中使用vscode编写node.js&#xff0c;需要在控制台中打印一些中文信息&#xff0c;但是一直出现中文乱码问题&#xff0c;英文和数字都显示正常。在网上试了很多设置的办法&#xff0c;最终找到windos11设置中解决。 2. 原因 首先打开控制台&…
阅读更多...
centos 7.7 离线安装docker

centos 7.7 离线安装docker

centos 7.7 离线安装docker Index of linux/static/stable/x86_64/https://download.docker.com/linux/static/stable/x86_64/ 【1】离线下载docker 压缩包上传至 /usr/local 目录&#xff0c;解压缩&#xff0c;并复制到 /usr/bin/ 目录中。 cd /usr/local/tar -zxvf docke…
阅读更多...
力扣 第 123 场双周赛 解题报告 | 珂学家 | 二维偏序+单调队列优化

力扣 第 123 场双周赛 解题报告 | 珂学家 | 二维偏序+单调队列优化

前言 执手看歌敲金钗&#xff0c;笑语落珠明眸睐。 忽然蝴蝶春风满&#xff0c;焉教冷镜瘦朱颜。 整体评价 T3是基于map的前缀和的变形题&#xff0c;T4是二维偏序的一道应用题。 题外话&#xff0c;力扣还是实现N久之前的承诺了&#xff0c;命名权奖励&#xff0c;赞一个。 …
阅读更多...
７隐藏进程＿Linux＿Rootkit．md

７隐藏进程＿Linux＿Rootkit．md

Xcellerator 密码学Linux其他逆向工程 文章目录 [Linux Rootkit 第 7 部分&#xff1a;隐藏进程](https://xcellerator.github.io/posts/linux_rootkits_07/)选择要隐藏的 PID隐藏 PID Linux Rootkit 第 7 部分&#xff1a;隐藏进程 2020-10-01 :: TheXcellerator # linux #…
阅读更多...
Quartus IP 之mif与hex文件创建与使用

Quartus IP 之mif与hex文件创建与使用

一、mif与hex概述 ROM IP的数据需要满足断电不丢失的要求&#xff0c;ROM IP数据的文件格式一般有三种文件格式&#xff1a;.mif、.hex、.coe&#xff0c;Xilinx与Intel Altera支持的ROM IP数据文件格式如下&#xff1a; Xilinx与Altera支持的ROM文件格式 Alterahex、mifAM&am…
阅读更多...
pwn学习笔记（2）

pwn学习笔记（2）

pwn学习笔记&#xff08;2&#xff09; 1.三种常见的寄存器&#xff1a; ​ ax寄存器&#xff1a;通用寄存器&#xff0c;可用于存放多种数据 ​ bp寄存器&#xff1a;存放的是栈帧的栈底地址 ​ sp寄存器&#xff1a;存放的是栈顶的地址 2.栈帧与栈工作的简介&#xff1a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023