Question

这是一个带有3张图像的滑块，可以在原始javascript中完美运行，我正在尝试使其在React.js中运行。 3张图片后，我得到了这个错误。我知道问题可能是因为jsx是在代码后呈现的，但是我不知道如何解决它，它还告诉我声明了let slideInterval变量，但是当我将光标放在它上面时却从不读取，请帮忙。

        <prev> import React from 'react';
        import '../style.css';
        import photo1 from '../images/01.jpg';
        import photo2 from '../images/02.jpg';
        import photo3 from '../images/03.jpg';


      const Slider2 = () => {


      const slides = [photo1, photo2, photo3]<code>

      <prev>const auto = true; // Auto scroll
            const intervalTime = 3000;
            let slideInterval;
           //const slides =  document.querySelectorAll('.slide');
           const nextSlide = () => {
           // Get current class
            //console.log(slides);
            const current = document.querySelector(".current");
           // Remove current class
           current.classList.remove("current");
           // Check for next slide
           if (current.nextElementSibling) {
           // Add current to next sibling
           current.nextElementSibling.classList.add("current");
           } else {
           // Add current to start

           slides[0].classList.add("current");

           setTimeout(() => current.classList.remove("current"));
           }
           };<code>
           <prev>if (auto) {
           // Run next slide at interval time
           slideInterval = setInterval(nextSlide, intervalTime);
            }

           return (
           <div class="slider">
           <div class="slide current">
           <img src={slides[0]} />
           </div>
           <div class="slide  ">
           <img src={slides[1]} />
           </div>
           <div class="slide  ">
           <img src={slides[2]} />
           </div>
           </div>
           );
           };

           export default Slider2;                 <code>

Answer 1

在添加之前检查slides[0]和classList是否未定义，

if(slides[0] && slides[0].classList ){
  slides[0].classList.add("current");
}

Answer 2

我只是向img标签添加一个ID，然后添加以下代码行： document.getElementById（'img1'）。classList.add（'current'）;

代替幻灯片[0] .classList.add（“ current”）;解决了。

TypeError：无法读取未定义的属性“ add”

2 个答案: