
React
文章平均质量分 68
记录学习React框架踩过的坑
流年若逝
这个作者很懒,什么都没留下…
展开
-
React实现步骤条引导
目录1. 功能需求2. 核心代码3. 完整代码4. 效果展示1. 功能需求因项目需求要做一个类似于任务引导的功能,什么意思呢?就是类似于我们去注册一个账号要我们第一步填写什么信息,然后第二部填写什么信息,依次类推。2. 核心代码const steps = [ { title: '步骤一', content: <div style={{marginTop:30, marginBottom:150, marginLeft:20}原创 2021-06-10 16:26:24 · 1521 阅读 · 0 评论 -
解决:使用React设置height:100%没有实现自适应屏幕的问题
目录1. 问题2. 解决方案3. 效果展示4. 代码5. 参考文献1. 问题最近在做一个前端界面,在未解决问题之前的效果图如下所示:可以清楚的发现,我们的底部的文字并未与屏幕的底部距离一致,而是在屏幕的上面一点。之前的一个解决办法是:在标签里面设置一个style={{height:700}}这个看起来可以解决我的问题,但是当换一个屏幕更大的显示器上,我发现了这样的高度并没有适应我们的大屏幕,所以这种方法不可行。2. 解决方案上面提到的那种方法不可行,于是网上找到了一种说法是:.head_原创 2021-06-10 10:10:48 · 4821 阅读 · 0 评论 -
React实现页面之间的跳转
目录1. 需求说明2. 技术实现3. 代码展示4. 效果展示5. 参考文献1. 需求说明目前在学习过程中需要结合自己之前复现的论文算法弄一个人工智能安全平台系统,其中需要做一个前端展示我们的模块,我们点击模块就可以跳转到相应的界面,因为之前做过一个这样的前端展示界面,但是是在别人的项目上改造过来的,很多技术细节都没有搞明白,这次做的就是自己亲自搭建的一个前端界面,所以需要用到关于React页面跳转的知识,下面就介绍下自己实现的这个基础功能吧。2. 技术实现功能很简单,就是实现一个界面到另外一个界面之原创 2021-06-08 14:42:16 · 8897 阅读 · 4 评论 -
关于React跳出当前页面时,如何清除该页面的定时器解决方案
目录1. 前言2. 解决方案3. 效果展示4. 参考文献1. 前言在使用React框架做项目的时候,出现了一个问题,就是我在当前界面使用定时器实现动态展示,然后当前页面定时器还未结束我就跳转到另外一个界面,让后出现下面这种情况:2. 解决方案针对这种情况,我网上找了些参考资料,是这样解释的:当页面跳转的时候,事实上我们已经获取不到页面的dom元素了,但是他的js还在继续执行,所以我们就可以通过这个方式解决问题(当获取不到页面的dom时就给他清除定时器)。所以我们只需要在页面跳转的时候将定原创 2021-05-28 10:16:47 · 4059 阅读 · 2 评论 -
React读取并显示gif
目录1. 前言2. 解决方案3. 代码实现4. 效果展示1. 前言最近在使用React框架做项目的时候,想读取gif格式的图片,然后网上搜索了下关于React如何读取gif的文章,下面时搜索出来的文章列表:然后点击进去一一查看了下,里面没有提到如何读取gif,但是我想是不是React读取gif特别难,但是自己无意浏览到一位博主写了一句话:React读取gif和读取jpg或者png的方式是一样的,然后自己尝试试一下,果然成功了。2. 解决方案就是读取普通的图片一样,只需要这一句话就行import原创 2021-05-28 10:03:43 · 2272 阅读 · 0 评论 -
React实现动态展示柱状图
目录1. 效果展示2. 需求说明3. 设计思路4. 代码展示4.1 获取数据4.2 绘制柱状图4.3 动态更新柱状图4.4 完整代码4.5 测试数据5. 参考文献1. 效果展示2. 需求说明我们需要实现一个动态展示的柱状图,数据来源于本地的json数据,我们需要每读取一条数据然后每隔一秒刷新然后展示第二条数据,直到数据读取完毕停止更新。3. 设计思路根据上面提到的需求,自己设计了一个思路来实现,如下所示:1)获取本地的json数据2)绘制柱状图3)动态更新柱状图的数据4)终止迭代数据从原创 2021-05-26 12:44:15 · 2119 阅读 · 10 评论 -
React使用定时器自动切换图片
目录1. 效果展示2. 需求分析2.1 定时器2.2 实现思路2.3 代码2.4 补充3. 参考文献1. 效果展示2. 需求分析最近在学习React框架的时候,做的项目有一个需求就是如何将多张图片依次播放出来,当时的想法是使用轮播图去实现播放,但是这里有一个问题来了:如果我们的图片数量低于20张以下的话效果还是可以的,如果我们图片的数量较多的话,那使用轮播图效率就显得低下,这时我的这个想法就立即pass。既然,轮播图这种方式不行,有没有其他方法替代呢?这里我到百度和谷歌上找了个遍,终于看到了一种适原创 2021-05-20 20:15:04 · 1667 阅读 · 3 评论 -
关于React项目中,require无法动态加载本地图片
目录1. React加载本地图片的方法1.1 方法一1.2 方法二2. 关于使用require无法加载图片的解决方案2.1 案例一2.2 案例二3.参考文献1. React加载本地图片的方法1.1 方法一第一种方法相信大多数人用的比较多,而且出现无法加载图片的错误比较少。import user from '../img/user.png'<img src={user} alt="" />1.2 方法二第二种方法也是比较常用,当时使用require这个方法读取本地图片出现错误的概率原创 2021-05-19 16:18:10 · 4329 阅读 · 2 评论