React自实现滚动轮播

记录开发过程中以后可能会经常出现的组件，为以后减少开发时间。方便自己，方便大家，要是有什么意见，大家可以提出！一起进步！

关键代码献上：

import React, { useEffect, useState } from 'react';
import style from './index.module.less';
import _ from 'lodash';
let timer = null;

const ScrollList = ({ data = [] }) => {
    // data 需要轮播的数据       
    const [scrollHeight, setScrollHeight] = useState(0);

    useEffect(() => {
        let switchUl = document.getElementsByClassName('scroll-content')[0];           
        if (switchUl && data.length > 6) {
          
           // 滚动话术区域的定时器
           timer = setInterval(() => {
            
                // 这里的40是每一条li的高度                    
                if (scrollHeight <= 0 - 40 * data.length) {                   
                    switchUl.style.transition = 'none'; // 为了是轮播图呈现出循环效果，之前的轮播在运行到最后一个的时候会有所有项都滚动下来
                    setScrollHeight(0);
                } else {
                    if (scrollHeight === 0) {
                        switchUl.style.transition = 'all .5s linear'; // 因为上一步将动画效果置为了none，所以在轮播图为第一个的时候再加上这个动画效果
                    }
                    setScrollHeight(scrollHeight - 40);
                }
            }, 1500);
    }
    return () => {
        clearInterval(timer);
    };

}, [data, scrollHeight]);

return (
<div className={style.box}>
    <ul
        className={'scroll-content'}
        style={{ transform: `translateY(${scrollHeight}px)`, height: '240px' }}
    >
        {data.map((item, index) => {
            return (
                <li className={style.title} key={index} style={{ height: '40px' }}>
                    ... ... 这里是一行里需要的内容，在此省略
                </li>
            );
        })}

        {/* 这里的数字6 代表的是UL里做多放下多少条，在这个框里做多放下6条，这里这样做的目的是为了展现出轮训的感觉 */}
        {data.length > 6 &&
        data.slice(0, 6).map((item, index) => {            
            return (
                <li className={style.title} key={index} style={{ height: '40px' }}>
                    // ... ... 这里是一行里需要的内容，在此省略
                </li>
            );
        })}
    </ul>
</div>
);};

export default ScrollList;