Next.js13中React Slick多滑块自定义箭头点击无响应问题

核心问题：单个Ref复用导致仅最后一个滑块响应 #

你在循环渲染多个<Slider>组件时，所有滑块共用了同一个sliderRef。React的ref在循环中若不做特殊处理，最终只会指向最后一个渲染的组件实例，所以点击箭头时，只有最后一个滑块会触发滑动操作，其他滑块完全无响应。

解决步骤 #

1. 改用Ref数组管理多个滑块 #

将单个sliderRef替换为ref数组，每个滑块对应数组中的一个独立元素：

// 初始化存储多个滑块ref的数组
const sliderRefs = useRef<(typeof Slider | null)[]>([]);

2. 为循环中的每个滑块分配独立Ref #

在map循环渲染<Slider>时，通过当前索引给每个滑块绑定对应的ref：

{dataProductsCurrentLocale.categories.map((category: any, index: number) => {
    return (
        <div className="category_container" key={category.id}>
            {/* ...其他头部代码... */}
            <Slider 
                {...settings} 
                className="carrousel_container" 
                ref={el => sliderRefs.current[index] = el}
            >
                {/* ...滑块子内容... */}
            </Slider>
            {/* ...箭头组件... */}
        </div>
    );
})}

3. 修改箭头点击函数，传入索引控制对应滑块 #

把next和previous改成接收索引参数的函数，点击时操作对应位置的滑块：

const next = (index: number) => {
  sliderRefs.current[index]?.slickNext();
};

const previous = (index: number) => {
  sliderRefs.current[index]?.slickPrev();
};

然后在箭头的onClick事件中传入当前循环的索引：

<div className="arrows">
    <Image
        src={'/assets/images/icons/slide-black-arrow.png'}
        width={24}
        height={10}
        alt="Prev"
        onClick={() => previous(index)}
        className={'prev arrow'}
    />
    <Image
        src={'/assets/images/icons/slide-black-arrow.png'}
        width={24}
        height={10}
        alt="Next"
        className={'next arrow'}
        onClick={() => next(index)}
    />
</div>

4. 可选：隐藏默认箭头避免冲突 #

如果不需要React Slick自带的默认箭头，可以在settings中添加arrows: false，防止默认箭头和自定义箭头功能冲突：

const settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 3,
    arrows: false, // 隐藏默认箭头
    responsive: [
        // ...原有响应式配置...
    ],
};

其他排查点 #

• 确认React Slick版本与Next.js 13兼容，部分旧版本在App Router模式下可能存在兼容性问题
• 检查滑块的子元素数量是否满足滑动条件（比如slidesToShow:4时，至少需要5个及以上子元素才会激活滑动功能）
• 检查自定义箭头的z-index样式，避免被其他元素遮挡导致无法触发点击事件

内容的提问来源于stack exchange，提问作者Nerio Villalobos