Javascript 滑块上的按钮上的触发器光滑

我需要点击自定义箭头，滑块的工作原理是什么。我知道JQuery或其他东西中有一个触发器，但是在react中我能做什么呢？ 你可以在这个链接上看到api滑动条 徖

import React, { Component } from "react";
import Slider from "react-slick";

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
}

export default class CustomArrows extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };
    return (
      <div>
        <h2>Custom Arrows</h2>

        // CLICK HERE
        <div><span>arrows<span><span>arrows<span></div>

        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“react slick”导入滑块；
功能SampleNextArrow（道具）{
const{className，style，onClick}=props；
返回(
);
}
功能示例PrevArrow（道具）{
const{className，style，onClick}=props；
返回(
);
}
导出默认类CustomArrows扩展组件{
render（）{
常量设置={
点：是的，
无限：是的，
幻灯片放映：3，
幻灯片滚动：1，
下一行：，
如箭头所示：
};
返回(
自定义箭头
//点击这里
阿罗萨罗
1.
2.
3.
4.
5.
6.
);
}
}

我找到了这个解决方案

document.getElementsByClassName('slick-next')[0].click()

但我不知道在react中使用它是否好