如何在爱丽丝轮播反应中使用 isDisabled 和自定义箭头按钮

Question

我在我的react js项目中使用alice carousel，我需要添加自定义箭头，但我担心我无法在箭头中获得禁用类，任何人都可以帮助我吗？

 <AliceCarousel
  mouseTracking
  disableDotsControls
  responsive={{ 0: { items: 1 } }}
  renderPrevButton={() => {
    return (
      <a
        className={`${activeIndex > 0 ? 'active' : ''
          } slide-prev mr-2 cursor-pointer`}
      >
        <LeftArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' />
      </a>
    );
  }}
  renderNextButton={() => {
    return (
      <a
        className={`${activeIndex < 1 ? 'active' : ''
          } slide-next mr-2 cursor-pointer`}
      >
        <RightArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' />
      </a>
    );
  }}
  onSlideChanged={(e) => setActiveIndex(e.item)}
>

Answer 1

disabled

类通常用于指示元素或按钮不可点击或不可交互。但是，就您而言，您似乎想根据

activeIndex

状态有条件地应用该类。

<AliceCarousel
  // ... (other props)
  renderPrevButton={() => {
    return (
      <a
        className={`slide-prev mr-2 cursor-pointer ${
          activeIndex > 0 ? 'active' : 'disabled'
        }`}
      >
        <LeftArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' />
      </a>
    );
  }}
  renderNextButton={() => {
    return (
      <a
        className={`slide-next mr-2 cursor-pointer ${
          activeIndex < 1 ? 'active' : 'disabled'
        }`}
      >
        <RightArrowIcon className='text-2xl text-blue-dark opacity-[0.15]' />
      </a>
    );
  }}
  onSlideChanged={(e) => setActiveIndex(e.item)}
>
  {/* ... (carousel content) */}
</AliceCarousel>