react/antd -- 让antd的跑马灯支持自轮播的时间

官网那边不能设置轮播的时间，也没有手动切换案例，下面咱们给他添加一个补丁吧

补丁编写

代码以下

/**
 * 
 * @param carousel carousel ref
 * @param carousel_autoplay_time 自定义时间
 */
const init_carousel_autoplay = (carousel: any, carousel_autoplay_time: number) => {
    // 轮播定时器
    var carousel_autoplay_timer: any = null
    // 自动播放
    const carousel_autoplay = () => {
        carousel_autoplay_timer = setTimeout(() => {
            carousel.current.next()
            carousel_autoplay()
        }, carousel_autoplay_time);
    }
    // 清理定时器
    const clear_timeout = (cb: () => void) => {
        if(carousel_autoplay_timer){
            clearTimeout(carousel_autoplay_timer)
            return
        }
        cb && cb()
    }
    // 重置自动播放
    const reset_aotoplay_timer = () => {
        // 清理
        clear_timeout(() => {
            // 继续轮播
            carousel_autoplay()
        })
    }
    // 轮播上一个
    const carousel_prev = () => {
        reset_aotoplay_timer()
        carousel.current.prev()
    }
    // 轮播下一个
    const carousel_next = () => {
        reset_aotoplay_timer()
        carousel.current.next()
    }
    return {
        carousel_autoplay,
        carousel_prev,
        carousel_next,
        clear_timeout,
    }
}

export default init_carousel_autoplay
复制代码

使用

使用代码示例

// 定时轮播时间
const carousel_autoplay_time = 5e3
const { carousel_autoplay, carousel_prev, carousel_next, clear_timeout } = init_carousel_autoplay(carousel, carousel_autoplay_time)
useEffect(() => {
    // 启动轮播
    carousel_autoplay()
    // 离开清理定时器
    return clear_timeout
}, [])
复制代码

这里还有两个点击切换上一个和下一个的事件，可直接使用onClick={carousel_prev}

antd没有手动切换的例子，咱们能够在外面包一个div，而后下面弄两个按钮就能够了，点击用上面补丁的函数（使用默认的话，会和自动轮播冲突哦）

完整代码截图

其余

useEffect(f, [])
复制代码

之因此要用useEffect(f, []), 是由于这样保证了它只会执行一次。否则每一次渲染都执行一次，无数个定时器出现，那也太恐怖了。 而后之因此要return，是由于要销毁定时器

发现
经楼下掘友提现，autoplaySpeed 和 autoplay配合也是能够的哈。（虽然有点bug）

--完--