React实现轮播组件的开发例子

第一步，需求

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

轮播的图片
配置轮播图片切换的速度
可配置是否自动轮播
可配置自动轮播的时候鼠标放上去是否暂停
可配置自动轮播的速度
可配置是否需要前后箭头
可配置是否需要 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(
      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 / count + '%';
    return (
     

       
     

    );
  }
}
let / 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] = (
                  key={'dot' + i}
          className={"slider-dot" + (i === this.props.nowLocal?" slider-dot-selected":"")}
          onClick={this.handleDotClick.bind(this, i)}>
       
      );
    }
    return (
     

    );
  }
}
代码可以看出，我们用 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 (
     

    );
  }
}
这个组件下面有两个箭头，分别是向前和向后，回调的 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 ;
    });

    let arrowsNode = ;

    let dotsNode = ;

    return (
              className="slider"
        onMouseOver={this.props.pause?this.pausePlay.bind(this):null} onMouseOut={this.props.pause?this.goPlay.bind(this):null}>
         

              left: -100 * this.state.nowLocal + "%",
              transitionDuration: this.props.speed + "s",
              width: this.props.items.length * 100 + "%"
            }}>
              {itemNodes}
         

          {this.props.arrows?arrowsNode:null}
          {this.props.dots?dotsNode:null}