Javascript 如何解决警告：React无法识别DOM元素上的'currentSlide'，'slideCount'属性

我在next.js项目中使用“react slick”作为图像滑块。使用此选项时，console会为DOM元素上的“currentSlide”和“slideCount”属性显示此警告

Warning: React does not recognize the `currentSlide` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `currentslide` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in svg (created by ForwardRef(SvgIcon))
in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
in ForwardRef
in ForwardRef (at HomeProductsSegment.js:560)
in PrevArrow (created by InnerSlider)
in div (created by InnerSlider)
in InnerSlider (created by Slider)
in Slider (at HomeProductsSegment.js:641)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:631)
in section (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:630)
in HomeProductsSegment (created by WithStyles(HomeProductsSegment))
in WithStyles(HomeProductsSegment) (at pages/index.js:417)
in App (at pages/index.js:409)
in Home (created by WithStyles(Home))
in WithStyles(Home) (at _app.tsx:18)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

Warning: React does not recognize the `slideCount` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `slidecount` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in svg (created by ForwardRef(SvgIcon))
in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
in ForwardRef
in ForwardRef (at HomeProductsSegment.js:560)
in PrevArrow (created by InnerSlider)
in div (created by InnerSlider)
in InnerSlider (created by Slider)
in Slider (at HomeProductsSegment.js:641)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:631)
in section (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:630)
in HomeProductsSegment (created by WithStyles(HomeProductsSegment))
in WithStyles(HomeProductsSegment) (at pages/index.js:417)
in App (at pages/index.js:409)
in Home (created by WithStyles(Home))
in WithStyles(Home) (at _app.tsx:18)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root

另外，在中发现了此问题

以下是我尝试的示例代码：

import React from "react";
import Slider from "react-slick";
 
class SimpleSlider extends React.Component {
  render() {
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <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>
    );
  }
}

从“React”导入React；
从“react slick”导入滑块；
类SimpleSlider扩展了React.Component{
render（）{
变量设置={
点：是的，
无限：是的，
速度:500,，
幻灯片放映：1，
幻灯片滚动：1
};
返回(
1.
2.
3.
4.
5.
6.
);
}
}

反应灵活：

常量灵活箭头左=（{currentSlide，slideCount，…props}）=>(
以前的
);
常量SlickArrowRight=（{currentSlide，slideCount，…props}）=>(
下一个
);
常量设置={
点：是的，
无限：是的，
速度:500,，
幻灯片放映：1，
幻灯片滚动：1，
如箭头所示：，
下一行：，
};

自定义

prevArrow

和

nextArrow

---

发布您的相关代码我尝试了他们的文档示例代码，如下所示：

const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
  <button
    {...props}
    className={
      "slick-prev slick-arrow" +
      (currentSlide === 0 ? " slick-disabled" : "")
    }
    aria-hidden="true"
    aria-disabled={currentSlide === 0 ? true : false}
    type="button"
  >
    Previous
  </button>
);
const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
  <button
    {...props}
    className={
      "slick-next slick-arrow" +
      (currentSlide === slideCount - 1 ? " slick-disabled" : "")
    }
    aria-hidden="true"
    aria-disabled={currentSlide === slideCount - 1 ? true : false}
    type="button"
  >
    Next
  </button>
);

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: <SlickArrowLeft />,
  nextArrow: <SlickArrowRight />,
};