react-slick组件中nextArrow与prevArrow按钮无法正常工作求助

我一眼就看出问题出在哪了——你直接用document.getElementsByClassName去获取箭头元素的方式，在React组件的渲染流程里根本行不通，具体原因和解决方法我给你拆解清楚：

为什么你的箭头按钮没反应？ #

1. DOM元素获取时机不对：当你在定义settingss变量时调用document.getElementsByClassName，此时组件还没完成渲染，DOM里根本不存在.a-left和.a-right这两个元素，所以你拿到的是空的集合。
2. 类型不匹配：就算侥幸能获取到元素，getElementsByClassName返回的是HTMLCollection（类数组对象），而react-slick的prevArrow/nextArrow属性要求传入的是单个React元素或者DOM节点，集合类型完全不兼容。

两种可行的修复方案 #

方案一：直接在配置中定义React箭头元素（推荐）

不需要提前在JSX里写箭头容器，直接把箭头的React元素写进settingss配置里，react-slick会自动帮你绑定点击事件：

var settingss = {
  infinite: false,
  slidesToScroll: 1,
  slidesToShow: 3,
  arrows: true,
  // 直接传入React元素
  prevArrow: (
    <div className="a-left">
      <span className="fa fa-chevron-left"></span>
    </div>
  ),
  nextArrow: (
    <div className="a-right">
      <span className="fa fa-chevron-right"></span>
    </div>
  ),
  variableWidth: false,
  responsive: [
    {
      breakpoint: 920,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
}

然后把你JSX里的<div className="arrows">...</div>这段代码删掉就行，箭头会由slick自动渲染到合适的位置。

方案二：用React Refs绑定DOM元素（适合箭头需要固定位置的场景）

如果你必须把箭头放在.bg容器里，那就用React的Ref来获取DOM元素，等组件挂载完成后再更新slick配置：

import { useRef, useEffect, useState } from 'react';
import Slider from 'react-slick';

// 组件内部逻辑
const leftArrowRef = useRef(null);
const rightArrowRef = useRef(null);
const [sliderSettings, setSliderSettings] = useState({
  infinite: false,
  slidesToScroll: 1,
  slidesToShow: 3,
  arrows: true,
  prevArrow: null,
  nextArrow: null,
  variableWidth: false,
  responsive: [
    {
      breakpoint: 920,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
});

// 组件挂载后，再把Ref指向的DOM元素传给slick配置
useEffect(() => {
  setSliderSettings(prev => ({
    ...prev,
    prevArrow: leftArrowRef.current,
    nextArrow: rightArrowRef.current
  }));
}, []);

// JSX部分
return (
  <div className={`card-item ${container_class}`}>
    <div className="bg">
      <div className="arrows">
        {/* 给箭头元素绑定Ref */}
        <div className="a-left" ref={leftArrowRef}>
          <span className="fa fa-chevron-left"></span>
        </div>
        <div className="a-right" ref={rightArrowRef}>
          <span className="fa fa-chevron-right"></span>
        </div>
      </div>
      <div className="dp-circle"></div>
      <div className="dp-name">John 
        <div className="dp-location">NYC</div>
      </div>
    </div>
    <Slider {...sliderSettings} className="fg-items">
      {item.activities.map((item1,i)=>{
        return (
          <div className="react-inter" key={i}>
            <div className="img"></div>
            <div className="info">
              <div className="caption"> This is for test </div>
              <div className="tags">
                <div className="visual">Visual</div>
                <div className="visual">Text</div>
                <div className="visual">Edited</div>
              </div>
              <div className="buttons">
                <div className="tick">
                  <span className="fa fa-check"></span>
                </div>
                <div className="cross">
                  <span className="fa fa-times"></span>
                </div>
              </div>
            </div>
          </div>
        )
      })}
    </Slider>
  </div>
);

如果是类组件的话，就用createRef()替代useRef，在componentDidMount生命周期里更新配置即可。

另外还要注意：自定义箭头的样式可能会被slick的默认样式覆盖，记得用CSS调整.a-left和.a-right的位置、z-index等属性，确保箭头能正常点击和显示。

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