使用 React 实现一个轮播组件

2019年9月20日 102次阅读来源: 阿城

tip

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

第一步需求

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

轮播的图片
配置轮播图片切换的速度
可配置是否自动轮播
可配置自动轮播的时候鼠标放上去是否暂停
可配置自动轮播的速度
可配置是否需要前后箭头
可配置是否需要 dot （我不知道怎么表述好，反正意思你懂）

这一步先到此为止～～～

第二步构建项目

这里我们是使用 React 框架，当然也是用它的好搭档 webpack 来构建自动化流程咯～?
不懂 webpack 的配置可以看我的博客关于 webpack 使用的文章，谢谢～?
这是项目开发目录的文件结构：

src
├── Slider              #Slider组件
|   |
|   ├──SliderItem          
|   |   ├──SliderItem.jsx
|   |   └──SliderItem.scss
|   |
|   ├──SliderDots        
|   |   ├──SliderItem.jsx
|   |   └──SliderItem.scss
|   |
|   ├──SliderArrows         
|   |   ├──SliderItem.jsx
|   |   └──SliderItem.scss
|   |
|   ├──Slider.jsx         
|   |
|   └──Slider.scss
|
├──images              #存放demo用的图片文件
|
└── index.js           #demo的入口文件

看目录结构我们应该明白了，我们主要关注 Slider 文件夹。

第三步基于需求的开发

这里我们开发组件的模式是按照需求驱动型，回到第一步的需求，我们先不管组件内代码，先写出我们想怎么样配置使用组件：

// index.js
import React from 'react';
import { render } from 'react-dom';
import Slider from './Slider/Slider';

const IMAGE_DATA = [
  {
    src: require('./images/demo1.jpg'),
    alt: 'images-1',
  },
  {
    src: require('./images/demo2.jpg'),
    alt: 'images-2',
  },
  {
    src: require('./images/demo3.jpg'),
    alt: 'images-3',
  },
];

render(
  <Slider
    items={IMAGE_DATA}
    speed={1.2}
    delay={2.1}
    pause={true}
    autoplay={true}
    dots={true}
    arrows={true}
  />,
  document.getElementById('root')
);

可以看到，在使用 Slider 组件的时候，根据需求，我们可以传入这些属性来配置组件。
一个 items 数组，决定了需要轮播的内容，items 里面每个元素都是一个对象，有 src 和 alt 属性，分别是轮播图片的 src 地址和 alt 内容；
speed 是图片切换的时候的速度时间，需要配置一个 number 类型的数据，决定时间是几秒；
autoplay 是配置是否需要自动轮播，是一个布尔值；
delay 是在需要自动轮播的时候，每张图片停留的时间，一个 number 值；
pause 是在需要自动轮播的时候，鼠标停留在图片上，是否暂停轮播，是一个布尔值；
dots 是配置是否需要轮播下面的小点；
arrows 是配置是否需要轮播的前后箭头；

第四步编写组件

首先我们来考虑一下需要多少个组件，最外层的 Slider 组件是毋庸置疑的了。
根据需求我们可以分出一个 SliderItem 组件，一个 SliderDots，一个 SliderArrows 组件，分别是轮播每个图片的item，轮播下面dots的组件，左右箭头组件。
我们先来编写每个小组件，组件是对外封闭独立的，所以它只需要对外暴漏属性的配置即可。

SliderItem

因为 SliderItem 是展示轮播图片的每个内容的，所以它需要的属性有，src 和 alt，因为之前我们已经把每个轮播项写成一个对象了，所以把 src 和 alt 作为属性放在 item，我们只需要一个 item 属性即可；它还需要决定它在父组件中大小，因为在未使用组件的时候我们是不知道轮播项的数目的，所以它的宽度需要根据父组件传给它count（图片数目）来计算。
所以它需要的属性有：

item (有 src 和 alt 属性)
count （轮播项总数目，计算每个轮播项的宽度）

import React, { Component } from 'react';

export default class SliderItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let { count, item } = this.props;
    let width = 100 / count + '%';
    return (
      <li className="slider-item" style={{width: width}}>
        <img src={item.src} alt={item.alt} />
      </li>
    );
  }
}

let width = 100 / count + '%'; 即是计算它占父组件的宽度百分比。

SliderDots

对于 SliderDots 组件，我们需要一个 count（轮播项总数目）来决定显示几个 dot，还需要一个 nowLocal 属性来判断哪个 dot 对应当前显示的轮播项，点击每个 dot 的是否需要一个回调函数 turn 来做出响应。
所以它需要的属性有：

count（轮播项总数目）
nowLocal（当前的轮播项）
turn（点击 dot 回调函数）

import React, { Component } from 'react';

export default class SliderDots extends Component {
  constructor(props) {
    super(props);
  }

  handleDotClick(i) {
    var option = i - this.props.nowLocal;
    this.props.turn(option);
  }

  render() {
    let dotNodes = [];
    let { count, nowLocal } = this.props;
    for(let i = 0; i < count; i++) {
      dotNodes[i] = (
        <span
          key={'dot' + i}
          className={"slider-dot" + (i === this.props.nowLocal?" slider-dot-selected":"")}
          onClick={this.handleDotClick.bind(this, i)}>
        </span>
      );
    }
    return (
      <div className="slider-dots-wrap">
        {dotNodes}
      </div>
    );
  }
}

代码可以看出，我们用 for 循环根据 count 来决定了需要多少个 dot，然后在每个 dot 绑定函数传入一个 i 值，并且如果这个 dot 对于当前显示的轮播项，就多加一个class slider-dot-selected。
每个 dot click 绑定的函数还需要计算需要向前或者向后移动多少个轮播项，然后回调 turn 函数。

SliderArrows

对于 SliderArrows 组件，我们只需要一个 turn 函数作出回调。
废话不多少，代码如下：

import React, { Component } from 'react';

export default class SliderArrows extends Component {
  constructor(props) {
    super(props);
  }

  handleArrowClick(option) {
    this.props.turn(option);
  }

  render() {
    return (
      <div className="slider-arrows-wrap">
        <span
          className="slider-arrow slider-arrow-left"
          onClick={this.handleArrowClick.bind(this, -1)}>
          &lt;
        </span>
        <span
          className="slider-arrow slider-arrow-right"
          onClick={this.handleArrowClick.bind(this, 1)}>
          &gt;
        </span>
      </div>
    );
  }
}

这个组件下面有两个箭头，分别是向前和向后，回调的 turn 是 1 和－1。

Slider 组件

import React, { Component } from 'react';

require('./Slider.scss');

import SliderItem from './SliderItem/SliderItem';
import SliderDots from './SliderDots/SliderDots';
import SliderArrows from './SliderArrows/SliderArrows';

export default class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nowLocal: 0,
    };
  }

  // 向前向后多少
  turn(n) {
    var _n = this.state.nowLocal + n;
    if(_n < 0) {
      _n = _n + this.props.items.length;
    }
    if(_n >= this.props.items.length) {
      _n = _n - this.props.items.length;
    }
    this.setState({nowLocal: _n});
  }

  // 开始自动轮播
  goPlay() {
    if(this.props.autoplay) {
      this.autoPlayFlag = setInterval(() => {
        this.turn(1);
      }, this.props.delay * 1000);
    }
  }

  // 暂停自动轮播
  pausePlay() {
    clearInterval(this.autoPlayFlag);
  }

  componentDidMount() {
    this.goPlay();
  }

  render() {
    let count = this.props.items.length;

    let itemNodes = this.props.items.map((item, idx) => {
      return <SliderItem item={item} count={count} key={'item' + idx} />;
    });

    let arrowsNode = <SliderArrows turn={this.turn.bind(this)}/>;

    let dotsNode = <SliderDots turn={this.turn.bind(this)} count={count} nowLocal={this.state.nowLocal} />;

    return (
      <div
        className="slider"
        onMouseOver={this.props.pause?this.pausePlay.bind(this):null} onMouseOut={this.props.pause?this.goPlay.bind(this):null}>
          <ul style={{
              left: -100 * this.state.nowLocal + "%",
              transitionDuration: this.props.speed + "s",
              width: this.props.items.length * 100 + "%"
            }}>
              {itemNodes}
          </ul>
          {this.props.arrows?arrowsNode:null}
          {this.props.dots?dotsNode:null}
        </div>
      );
  }
}

Slider.defaultProps = {
  speed: 1,
  delay: 2,
  pause: true,
  autoplay: true,
  dots: true,
  arrows: true,
  items: [],
};
Slider.autoPlayFlag = null;

在这里我们先是 import 依赖，以及需要的子组件。
Slider 有一个状态 nowLocal，是表明当前轮播的第几项。

前面一直讲 turn 函数，我们就先分析一下这个函数：

turn(n) {
  console.log();
  var _n = this.state.nowLocal + n;
  if(_n < 0) {
    _n = _n + this.props.items.length;
  }
  if(_n >= this.props.items.length) {
    _n = _n - this.props.items.length;
  }
  this.setState({nowLocal: _n});
}

它传入一个参数 n ，决定向前或者向后移动多少个轮播项，向前和向后分别对于－和＋。
turn 函数内，声明一个 _n 变量表示下一个轮播的第几项。
如果 _n 小于 0 ，那当然是不行的，所以就会让 _n 变成最后一项；
如果 _n 大于 items 的长度，那当然也是不行的，所以就会让 _n 变成第一项；
最后改变状态 nowLocal 等于 _n。

下面是一个开始自动轮播的函数 goPlay：

goPlay() {
  if(this.props.autoplay) {
    this.autoPlayFlag = setInterval(() => {
      this.turn(1);
    }, this.props.delay * 1000);
  }
}

如果 autoplay 是 true，则执行 setInterval 来自动调用 this.turn(1) 向前移动轮播项，this.props.delay * 1000就是根据配置的 delay 来决定多久移动一次。
这里我们需要一个 autoPlayFlag 参数来保存 setInterval 的回调，用来在鼠标停放在图片上停止自动轮播，我们把这个 autoPlayFlag 作为组件的一个属性来保存。

Slider.autoPlayFlag = null;

然后在组件初始化 componentDidMount 的时候调用这个函数：

componentDidMount() {
  this.goPlay();
}

我们还需要一个 pausePlay 函数来暂停自动轮播。
```
pausePlay() {
  clearInterval(this.autoPlayFlag);
}
```
最后就是 render 了，根据属性配置哪些函数和组件需要～

默认属性，这个是需要的，在使用属性的时候如果忘了一些配置项也不会出错。

Slider.defaultProps = {
  speed: 1,
  delay: 2,
  pause: true,
  autoplay: true,
  dots: true,
  arrows: true,
  items: [],
};

样式

什么，你告诉我显示在页面上的都是什么鬼？
来写 scss 吧：

* {
  margin: 0;
  padding: 0;
}
.slider {
  overflow: hidden;
  width: 100%;
  position: relative;

  &>ul {
    height: auto;
    overflow: hidden;
    position: relative;
    left: 0;
    transition: left 1s;
  }

  .slider-item {
    display: inline-block;
    height: auto;

    &>img {
      display: block;
      height: auto;
      width: 100%;
    }
  }

  .slider-arrow {
    display: inline-block;
    color: #fff;
    font-size: 50px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    z-index: 100;
    padding: 20px;
    cursor: pointer;
    font-weight: bold;

    &:hover {
      background: rgba(0,0,0,.2);
    }

    &.slider-arrow-right {
      right: 0;
    }
    &.slider-arrow-left {
      left: 0;
    }
  }

  .slider-dots-wrap {
    z-index: 99;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;

    .slider-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border: 3px solid #ccc;
      margin: 6px;
      cursor: pointer;
      border-radius: 20px;

      &:hover {
        border: 3px solid #868686;
      }

      &.slider-dot-selected {
        background: #ccc;
      }
    }
  }
}

这里不多说了，样式就这样～
有疑问可以 call me。

谢谢谢谢，谢谢各位客官光看～ ? ? 啊哈 ?

? ? ? ? ?

文章原文：使用 React 实现一个轮播组件
我的博客地址：qiutc.me
欢迎来吐槽！！！

    原文作者：阿城
    原文地址: https://segmentfault.com/a/1190000004459188
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

tip

第一步 需求

第二步 构建项目

第三步 基于需求的开发

第四步 编写组件