手动实现一个react导航组件并优化

最新推荐文章于 2024-05-18 09:54:55 发布
最新推荐文章于 2024-05-18 09:54:55 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端开发 react组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40882724/article/details/85000158
版权

为何要手写？既定的时间内没有找到合适的现有选择，放弃无谓的搜寻，自己写一个。

基本原理
  1. 菜单数据接口获取，一级菜单UI事件监听，对应的下层二级菜单放到一级菜单item的dataset属性里，事件触发时取出并显示。
  2. 事件监听（由于菜单之前不存在，于父层监听菜单item的冒泡事件）。
  3. 一级菜单：监听mouseover而不是mouseenter,二级菜单监听click并实现跳转页面
草图

在这里插入图片描述

效果图

在这里插入图片描述

存在的问题
一级菜单快速移动时存在轻微的卡顿

分析与猜测

  • .频繁的事件触发
    如下图所示：
    在这里插入图片描述
    因此，我们可以在菜单item之间添加一些外边距
最低0.47元/天 解锁文章
寻梦皮皮虾
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React导航栏效果（antd+react router4.0）
zfan520的博客
12-14 1万+
1、演示效果 最上面的部分为导航插件。 2、具体代码与介绍 2.1 Reactjs首次加载与路由页面    index.js首次加载 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import RouterIndex from './routers/inde
这个css布局样式真巧妙啊，react导航栏组件：Headmenu实现
小王的技术库
03-02 838
HeadMenu的样式如下：其中核心功能百分之95%是靠css实现的，参考的T-deisgn的源码，感觉比较巧妙，并且代码很容易理解，分享一下。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
手写一个动态React菜单组件
weixin_33826268的博客
12-20 1159
为何要手写？既定的时间内没有找到合适的现有选择，放弃无谓的搜寻，自己写一个。 基本原理 菜单数据接口获取，一级菜单UI事件监听，对应的下层二级菜单放到一级菜单item的dataset属性里，事件触发时取出并显示。 事件监听（由于菜单之前不存在，于父层监听菜单item的冒泡事件）。 一级菜单：监听mouseover而不是mouseenter,二级菜单监听click并实现跳转页面 功能设计图 ...
探索与实现：RC-MENU - 优雅的React菜单组件
最新发布
gitblog_00014的博客
05-18 293
探索与实现：RC-MENU - 优雅的React菜单组件 项目地址:https://gitcode.com/react-component/menu 在前端开发中，交互和用户体验是至关重要的元素之一。一个高效的菜单系统可以提升用户的操作体验，使应用更加易用。今天，我们要向您推荐一款强大的开源项目——RC-MENU，这是一个由React构建的专业级菜单组件，来自知名的Kissyteam团队。 项目介...
react实现侧边栏联动头部导航栏效果
sky_blue6的博客
08-21 3453
react 项目实现侧边栏联动头部导航栏 项目中使用react+antd design+redux+react-reouter-dom 实现思路 编写路由表=》循环遍历路由表=》渲染侧边栏=》单击侧边栏获取相应的标签数据=》存入redux=》遍历循环redux数据渲染头部导航栏 路由表 const RouterTree = [ { key: 'num_one', title: { icon: '', text: 'tex
React Navigation 的使用基础部分（六）导航栏按钮
u010418640的博客
07-02 2583
原文链接我们已经知道如何自定义导航栏的样式，现在我们让其有感知！好吧，这可能有点过，我们让其能响应触摸。在导航栏加一个按钮与导航栏交互最普遍的做法是触摸title左边或者右边的按钮。让我们在header右边添加一个按钮吧！class HomeScreen extends React.Component { static navigationOptions = { headerTitle...
react-ReactSlideshow组件
08-14
React Slideshow组件是React生态中的一个工具，用于创建吸引人的幻灯片展示。在React应用程序中，这样的组件能够帮助开发者轻松地实现动态、交互式的图片或内容轮播效果。React作为一个JavaScript库，专注于构建用户...
react-react写的cnode社区的一个app
08-14
除此之外，开发React App通常会结合使用其他工具和库，如React Router实现路由管理，创建可导航的多页面应用；Webpack或Parcel进行模块打包，优化资源加载；Babel转换JSX和ES6+语法，保证浏览器兼容性。 在“cnode-...
第一个React项目
02-26
在本项目"第一个React项目"中，我们将会深入学习React，这是一个由Facebook开发并维护的JavaScript库，专门用于构建用户界面，尤其是单页应用程序（SPA）。React以其组件化、虚拟DOM和声明式编程风格而闻名，是现代...
react-xt-fun:react系统，函数组件
03-11
HOC本质上是一个函数，接收一个组件并返回一个新的组件，可以用于注入额外的props或者修改组件的行为。 3. **React Router**：在构建大型系统时，路由管理至关重要。React-XT-Fun可能采用了React Router库，它允许...
React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
热门推荐
weixin_34411563的博客
03-12 2万+
最近在学习react时，用到了很流行的UI框架Ant Design，也了解了一下Ant Design Pro，发现它们都有导航组件，Ant Design框架的导航菜单在这里，Ant Design Pro是权限菜单，权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户，比如管理员有给用户分配不同角色的权限，那管理员就可以看到系统管理等导航菜单，而用户A只有发布某些业务的权限，那用户A就不能看到系...
5款鼠标经过切换二级内容导航菜单
03-01
导航菜单 鼠标经过 鼠标经过切换 二级内容导航菜单
导航菜单React
02-20
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制到您的项目中，以
React中组件的导航方式
weixin_48732874的博客
11-09 615
一、声明式导航（主要利用a标签进行页面跳转） （一）Link 为你的应用提供声明式，无障碍导航，默认解析成a标签 to(String): 点击跳转到指定路径 <Link to="/home" /> 例子： (item.path = '/home') <li key={item.name}> <Link to={item.path}>{item.title}</Link> </li>) to(Obj
react路由篇:利用路由实现顶部导航效果
YanHSama的博客
10-09 1327
前提说明 react使用typescript来编写代码; 路由使用’@types/react-router-dom’; 利用路由实现-顶部导航,点击顶部导航,出现不同的内容; 要实现的效果 首页有四个菜单(首页,二页,Ⅲ页,肆页),点击不用的菜单显示不同的页面内容,但是顶部导航始终存在页面顶部;首页中有个跳转登录页的链接,点击直接跳转至登录页面,页面中不在显示顶部菜单 效果图 首页效果 点击首页效果 点击二页效果 点击三页效果 点击肆页效果 首页点击跳转登录页效果 当跳转的页面不存在时效果 具
React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构
roamingcode的博客
08-15 2万+
引言 最近要做一个组织机构树的树级菜单展示，UI框架使用的是Ant Design,这不正好可以使用Tree组件，如图示 奈何领导说太丑，指明要换成类似Menu形式的树形菜单，如图示 于是乎，有两种修改方案 先考虑改造Tree控件，这其中不仅需要修改css,还要修改Tree的内部结构 不使用Tree控件直接使用Menu导航菜单，在其上添加所需要的功能 这里采用第二种方案，首先...
react使用antd组件递归实现左侧菜单导航树
weixin_43021174的博客
12-21 2977
import React from 'react' import { Menu, Icon } from 'antd'; import './index.less'; import MenuConfig from './../../config/menuconfig'; //导入数据 const SubMenu = Menu.SubMenu; export default class NavL...
如何完整的编写一个React通用组件？
九阴与九阳
10-26 5166
React组件概念想必大家都熟悉了，但是在业务开发过程中，面对通用的业务，怎么编写一个通用的React业务组件呢？本文以实际案例说明，如何编写一个通用的业务组件。 案例背景 实现一个如图所示的组件，可以添加对组件进行添加和删除 实现思路 实现组件的界面样式 实现组件的基本功能 考虑通用型和可扩展性 实现基本的界面样式 实现上面的界面展示，需要三个方面的东西 一个文本框 一个➖操作 一个➕操...
请用JavaScript代码实现一个react 路由组件
02-27
以下是一个使用React和React Router库实现的简单的路由组件示例： ```javascript import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; function App() { return ( <Router> <div> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> </Router> ); } export default App; ``` 在这个示例中，我们首先导入了React和React Router库。然后，我们创建一个名为`App`的函数组件，并在其中使用`BrowserRouter`作为Router组件。接下来，我们在`div`元素中包含了一个`Switch`组件，用于渲染路由的内容。在`Switch`组件中，我们使用了三个`Route`组件来指定三个不同的路径，每个路径都对应不同的组件。 例如，当用户访问`/about`路径时，React将会渲染`About`组件。如果用户访问任何未定义的路径，React将渲染`Home`组件，因为我们将`exact`属性传递给了路径为`/`的`Route`组件，使其仅在访问该路径时进行渲染。 请注意，以上代码示例假设我们在应用程序根目录下有名为`Home.js`、`About.js`和`Contact.js`的组件文件，这些文件包含了相应的组件定义。如果这些组件不存在，应用程序将无法正常工作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值