如何解决如何解决警告:React无法识别DOM元素上的“ currentSlide”,“ slideCount”道具
我在next.js项目中将“ react-slick”用于图像滑块。使用此功能时,控制台会在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
也在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>
);
}
}
反应流畅:npm react-slick
解决方法
{
data:{id:1,textValue: "hello world"},// someOtherPropertyName in not present here
valueProperty: "someOtherPropertyName",}
自定义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,...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 />,};
和prevArrow
https://github.com/akiran/react-slick/issues/623#issuecomment-629764816
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。