使用 React 实现一个轮播组件

tip

React 刚出来不久,组件还比较少,不像 jquery 那样已经有很多现成的插件了,当是就自己写了一个基于 React 的轮播组件,当然只是一个小 demo,刚刚有用 es6 的语法重新改了改,就想着写一个小教程给新手,如何实现一个 React 的小组件。
先放上仓库地址,可以先 clone 来看看代码:https://github.com/TongchengQiu/react-slider
react-slider 是一个图片轮播的组件,支持的配置有 图片(必须好不好,要不然轮播毛)、轮播图片的速度、是否自动轮播、自动轮播的时候鼠标放上去是否暂停、自动轮播速度、是否需要前后箭头、是否需要 dot (我不知道怎么表述好,反正意思你懂)。

第一步 需求

首先,写一个组件必须先考虑改组件的需求有哪些,支持的配置需要哪些。
如上已经说了改组件的需求:

  • 轮播的图片

  • 配置轮播图片切换的速度

  • 可配置是否自动轮播

  • 可配置自动轮播的时候鼠标放上去是否暂停

  • 可配置自动轮播的速度

  • 可配置是否需要前后箭头

  • 可配置是否需要 dot (我不知道怎么表述好,反正意思你懂)

这一步先到此为止~~~

第二步 构建项目

这里我们是使用 React 框架,当然也是用它的好搭档 webpack 来构建自动化流程咯~

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...