react
react专栏一些学习的技巧/学习遇到的坑
Elinkers
leetcode刷题中
展开
-
React自由练习系列(1):可筛选表单
文章目录前言一、目标二、运用知识点三、实现效果四、使用JSON素材/格式五、页面代码总结前言主要运用到的是React脚手架+antd文章是作者的react个人练习,一直觉得单页面设计也是一个学问,但是苦于思索想做的页面是什么。所以我记下自己练手的一些单页面,作为一个自由练习系列,也可以供大家可以参考。如果本文对你有帮助请点赞????收藏⭐!作者后续还会出这个系列!一、目标完成一个数据表格,表格内的值都是以json方式储存,除开正常的显示功能,还需要做到简单的筛选功能ps:前端页面筛选功能原创 2020-12-28 09:57:21 · 842 阅读 · 0 评论 -
使用React创建轮播图(4)实时跟踪
文章目录前言一、目标功能二、优化内容三、实现方法四、完整代码五、效果展示总结前言使用React创建轮播图(1)框架+自动跳转使用React创建轮播图(2)小按钮使用React创建轮播图(3)拖拽+优化代码一、目标功能实现跟踪小按钮,通过每一次切换页面,底部的小按钮会显示当前页面的位置二、优化内容1)优化代码,将一些重复的同类样式,通过js的方法创建相同节点2)使用import引入图片,图片位于相同的路径下三、实现方法通过两个函数renderDot(),creatPic(),通原创 2020-11-03 18:04:31 · 375 阅读 · 0 评论 -
使用React创建轮播图(3)拖拽+优化代码
文章目录前言一、目标功能二、优化内容三、实现方法四、完整代码五、效果展示总结前言使用React创建轮播图(1)框架+自动跳转使用React创建轮播图(2)小按钮一、目标功能在前言两次修改的基础上再次添加拖拽功能拖拽功能(1):实施跟踪拖动:当鼠标拖动时,图片移动的距离与鼠标滑动的距离相等(2):判断滑动区域功能:当鼠标取消点击时,如果拖动距离没有超过图片宽度一半距离则还原,如果超过宽度一半距离,则切换向右/向左(3):离开目标区域还原:当鼠标离开轮播图时,图片还原到原先位置二、优化原创 2020-10-30 20:54:41 · 606 阅读 · 0 评论 -
使用React创建轮播图(2)小按钮
文章目录前言一、目标功能二、实现方法1.添加渲染内容2.添加css样式内容三、完整代码四、效果展示总结前言使用React创建轮播图(1)框架+自动跳转一、目标功能在前言(1)的基础上添加小按钮功能1.关于左右切换小按钮:在原先自动切换的功能上(我使用的是将left的数据存入state数组中保存然后调用),再加上向左切换的函数2.关于指定页面小按钮:通过onClick事件修改对应数组的元素位置二、实现方法1.添加渲染内容代码如下:render(){ return(原创 2020-10-29 14:07:11 · 685 阅读 · 0 评论 -
React操作失误笔记
React操作失误笔记前言问题1.未绑定就引用有this的函数2.重复渲染总结前言一些我在学习React里的操作失误问题1.未绑定就引用有this的函数TypeError: Cannot read property ‘timer’ of undefined以下是使用onMouseOut引用out函数<div className="big" onMouseOut={this.out} onMouseOver={this.over}>问题:未使用bind绑定事件,修改方法(1原创 2020-10-27 18:32:17 · 143 阅读 · 0 评论 -
使用React创建轮播图(1)框架+自动跳转
使用React创建轮播图(1)文章目录使用React创建轮播图(1)前言一、目标功能二、实现方法1.创建rander渲染内容2.添加css样式内容3.自动轮播实现方法三.完整代码总结前言使用js创建轮播图使用工厂模式封装js轮播图一、目标功能在本系列的轮播图设计中,首先需要实现的是轮播图的大体框架,并且添加轮播图的基础功能(自动翻页,鼠标区域内暂停)二、实现方法与之前使用js写的寻找节点的方法不同,我们在react的render()里渲染元素为DOM1.创建rander渲染内容依然原创 2020-10-27 11:17:03 · 733 阅读 · 0 评论