Reactjs 如何在React Responsive Carousel中使用renderArrowPrev来实现下一个和上一个功能？

我正在使用 我能够使用RenderRowPrev和RenderRowNext渲染所需的图像。但我无法为它添加功能

    const Swiper = () => {
      const [hasNext, setHasNext] = React.useState(true);
      const [hasPrev, setHasPrev] = React.useState(true);
      const [labelPrev] = React.useState("PREVIOUS");
      const [labelNext] = React.useState("NEXT");

      const clickHandler = () => {
        console.log("clickHandlerCalled");
      };

      return (
        <Carousel
           renderArrowPrev={(clickHandler, hasPrev, labelPrev) => (
            <img
              style={{ height: "30px", width: "30px" }}
              src={`assets/img/previous.svg`}
            />
          )}
          renderArrowNext={(clickHandler, hasNext, labelNext) => (
            <img
              style={{ height: "30px", width: "30px" }}
              src={`assets/img/next.svg`}
           />
         )}
         onChange={onChange}
         renderThumbs={() => null}
        >
          {getSlides()}
        </Carousel>
      );
    };

const Swiper=（）=>{
const[hasNext，setHasNext]=React.useState（true）；
const[hasPrev，setHasPrev]=React.useState（true）；
常量[labelPrev]=React.useState（“先前”）；
常量[labelNext]=React.useState（“下一步”）；
常量clickHandler=（）=>{
log（“clickHandlerCalled”）；
};
返回(
(
)}
RenderRowNext={（clickHandler、hasNext、labelNext）=>(
)}
onChange={onChange}
renderThumbs={（）=>null}
>
{getSlides（）}
);
};

---

即使将第一个参数传递给RenderRowNext，也不会调用clickHandler。

在RenderRowPrev和RenderRowNext中，参数（clickHandler、hasPrev、labelPrev）由旋转木马库提供给您，您应该使用这些项，而不是自己编码：

const Swiper = () => {
      return (
        <Carousel
           renderArrowPrev={(clickHandler, hasPrev, labelPrev) =>
                hasPrev && (
                    <button onClick={clickHandler}>
                        <img 
                            style={{ height: "30px", width: "30px" }}
                            src={`assets/img/previous.svg`} />
                    </button>
                )
            }
            renderArrowNext={(clickHandler, hasNext, labelNext) =>
                hasNext && (
                    <button onClick={clickHandler}>
                        <img
                            style={{ height: "30px", width: "30px"}}
                            src={`assets/img/next.svg`} />
                    </button>
                )
            }
         renderThumbs={() => null}
        >
          {getSlides()}
        </Carousel>
      );
    };

const Swiper=（）=>{
返回(
hasPrev&(
)
}
RenderRowNext={（clickHandler、hasNext、labelNext）=>
hasNext&(
)
}
renderThumbs={（）=>null}
>
{getSlides（）}
);
};