react+函数组件(hook)实现简易轮播图

话不多说直接上代码

import React, { useEffect,useState,useRef } from 'react';
import './index.less'
import banner1 from '../../assets/img/banner1 (1).jpg';
import banner2 from '../../assets/img/banner1 (2).jpg';
import banner3 from '../../assets/img/banner1 (3).jpg';
import banner4 from '../../assets/img/banner1 (4).jpg';


const EmoCarousel = () => {
  const clsRef = useRef(['one','two','three','four'])
  const dotsRef = useRef(['change','','',''])

  const [dots,setDots]  = useState([''])
  const [cls,setCls]= useState([''])

  useEffect(()=> {
    setCls([...clsRef.current])
    setDots([...dotsRef.current])
    const time = setInterval(()=>{
      const clsTmp = [...clsRef.current]
      const dotsTmp = [...dotsRef.current]
      let tmp = String(clsTmp.pop())
      clsTmp.unshift(tmp)