Next.js使用glider-js实现轮播时其生成的div未加载API渲染元素

问题根因 #

• 初始化时机错误：window.load 事件通常在React组件挂载、API请求完成前就已触发，Glider初始化时.glider__list 内还没有接口返回的渲染元素
• 未监听数据变更：Glider初始化后不会自动识别DOM新增的子元素，数据更新后没有触发Glider刷新
• 初始化逻辑未关联数据源：Glider初始化逻辑的依赖项为空，不会随着today数组的更新重新执行

修复方案 #

1. 调整Glider初始化逻辑，去掉window.load监听，将today数组加入useEffect依赖项，确保数据加载完成后再初始化/刷新Glider
2. 增加Glider实例销毁逻辑，避免内存泄漏
3. 补充服务端渲染兼容判断，避免Next.js构建时报错

修改后的Carrousel组件代码

import { useEffect, useRef } from 'react'

export default function Carrousel({ dependData }) {
  const gliderRef = useRef(null)

  useEffect(() => {
    // 兼容Next.js服务端渲染，服务端无window对象直接返回
    if (typeof window === 'undefined') return
    // 数据源未加载完成时不执行初始化
    if (!dependData || dependData.length === 0) return

    const gliderElement = document.querySelector('.glider__list')
    if (!gliderElement) return

    // 已初始化过的实例直接调用refresh更新内容
    if (gliderRef.current) {
      gliderRef.current.refresh()
      return
    }

    // 首次初始化Glider
    gliderRef.current = new window.Glider(gliderElement, {
      slidesToShow: 5,
      slidesToScroll: 5,
      draggable: true,
      dots: '.glider__dots',
      arrows: {
        prev: '.glider__prev',
        next: '.glider__next'
      },
    })

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      if (gliderRef.current) {
        gliderRef.current.destroy()
        gliderRef.current = null
      }
    }
  }, [dependData]) // 数据源加入依赖，数据变化自动触发更新

  return null
}

父组件调用调整

在使用Carrousel组件的位置，将接口返回的today数组作为参数传入：

<Carrousel dependData={today} />

注意事项 #

如果后续轮播元素数量会动态修改，不需要重复初始化，直接调用Glider实例的refresh()方法即可更新配置。

内容的提问来源于stack exchange，提问作者Jonathan Guaynora