javascript - 如何解决 DOM 元素上的警告 : React does not recognize the `currentSlide` , ` slideCount` Prop

标签 javascript reactjs next.js

我在 next.js 项目中使用“react-slick”作为图像 slider 。使用它时,控制台会针对 DOM 元素上的 'currentSlide' 和 'slideCount' Prop 显示此警告。

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
另外,在 https://github.com/akiran/react-slick/issues/623 中发现了这个问题
这是我尝试的示例代码:
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 光滑:npm react-slick

最佳答案

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 />,
};
定制prevArrownextArrow https://github.com/akiran/react-slick/issues/623#issuecomment-629764816

关于javascript - 如何解决 DOM 元素上的警告 : React does not recognize the `currentSlide` , ` slideCount` Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63638782/

相关文章:

javascript - 循环遍历 String 中的对象数组

javascript - 分配给对象后变量仍然为空

javascript - 我如何将 Android 应用程序包装为 React Native 组件(完整 View )?

javascript - 类型错误 : Cannot read property of null in React Component

reactjs - 上传到 Firebase 存储执行,但图像返回为黑色方 block 。尝试了一切

javascript - 如何开始收集 ICE 候选人以进行对等连接

javascript - 如何在 svg 之前也始终在前景中获取导航栏?

reactjs - React Nextjs : Module parse failed:You may need an appropriate loader to handle this file type, 当前没有配置加载器来处理这个文件

reactjs - @ant-design/charts 的 Next.js 问题,错误

javascript - nextjs 将数据传递给组件