如何在滑块 React.js 之外添加自定义按钮组

Andrew 发表于 Dev

安德鲁

我使用 react-multi-carousel，我尝试在滑块外创建自定义按钮，但是当我创建自定义按钮时，我有一些错误：

我使用这个代码：

import React from "react";
import "./Cards.css";
import Carousel from "react-multi-carousel";
import classes from "./CarouselCards.module.css"
import ProductionCards from "./ProductionCards/ProductionCards.jsx"

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 4,
    paritialVisibilityGutter: 140
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    paritialVisibilityGutter: 50
  }
};

const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => {
  const { carouselState: { currentSlide } } = rest;
  return (
    <div className="carousel-button-group"> // remember to give it position:absolute
      <ButtonOne className={currentSlide === 0 ? 'disable' : ''} onClick={() => previous()} />
      <ButtonTwo onClick={() => next()} />
      <ButtonThree onClick={() => goToSlide(currentSlide + 1)}> Go to any slide </ButtonThree>
    </div>
  );
};

const CarouselTabs = ({ data }) => {
  return (
    <Carousel
      ssr
      itemClass="image-item"
      responsive={responsive}
      className={classes.card}
      minimumTouchDrag={80}
      infinite={true}
      rrows={false} renderButtonGroupOutside={true} customButtonGroup={<ButtonGroup />}
    >
      {data.map(item => <ProductionCards product={item} />)}
    </Carousel>
  );
};

export default CarouselTabs;

我如何解决这个问题并在滑块外有按钮？

尼西什

从错误中可以明显看出您没有在任何地方定义ButtonOne, ButtonTwo&ButtonThree但它们正在被使用。

从文档中react-multi-carousel我们可以自定义点或箭头，并且可以通过提供自定义组件作为 prop 来自定义customButtonGroup。

在您的实现中，提供了一个自定义按钮组，但从不声明内部使用的 components( ButtonOne, ButtonTwo& ButtonThree)。

因此，您可以定义一个自定义按钮组，如下所示

const CustomButtonGroup = ({ next, previous, goToSlide, carouselState }) => {
  const { totalItems, currentSlide } = carouselState;
  return (
    <div className="custom-button-group">
      <div>Current slide is {currentSlide}</div>
      <button onClick={() => previous()}>Previous slide</button>
      <button onClick={() => next()}>Next slide</button>
      <button
        onClick={() => goToSlide(Math.floor(Math.random() * totalItems + 1))}
      >
        Go to a random slide
      </button>
    </div>
  );
};

上面的例子直接取自react-multi-carousel stories，可以根据需要进行修改。

我在下面创建了一个示例沙箱是链接