Question

我现在有一个图像滑块，但是图像仅在单击按钮时才会更改，并且我想添加此功能使其自动运行：

var timer;
timer = setInterval(function() {
  plusSlides(1);
}, 5000);

这是React图像滑块代码（位于https://codepen.io/anon/pen/dBmvje的完整演示）：

function Slider({ items }) {
  const [ active, setActive ] = React.useState(0);
  const { length, [active]: slide } = items;

  const next = e => setActive((active + +e.target.dataset.step + length) % length);
  const goTo = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="slideshow-container">
        <div className="mySlides fade">
          <div className="numbertext">{active + 1} / {length}</div>
          <img src={slide.img} />
          <div className="text">{slide.title}</div>
        </div>
        <a className="prev" onClick={next} data-step={-1}>&#10094;</a>
        <a className="next" onClick={next} data-step={+1}>&#10095;</a>
      </div>
      <div className="dots">
        {items.map((n, i) => (
          <span
            key={n.id}
            className={`dot ${i === active ? 'active' : ''}`}
            onClick={goTo}
            data-index={i}
          ></span>
        ))}
      </div>
    </div>
  );
}

这是我从那里“借用”该函数的全部Javascript代码，因此很清楚“ plusSlides（1）;”在哪里。功能来自：

var timer;
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}
timer = setInterval(function() {
  plusSlides(1);
}, 5000);

Answer 1

在功能性React组件中，您可以使用effect hook (React.useEffect)设置副作用。在return语句之前添加以下代码：

  React.useEffect(() => {
    const timeout = setTimeout(() => setActive((active + 1 + length) % length), 5000);

    return () => clearTimeout(timeout);
  }, [active, length]);

useEffect的第一个参数是要运行的函数，第二个参数是依赖项列表（如果依赖项发生更改，该函数将重新运行）。该函数的返回值告诉您如何在卸载组件或更改依赖项之一时清除效果。

由于需要列出效果的依赖关系，因此在这种情况下，使用setTimeout而不是setInterval似乎更好。超时运行时，active的值将更改，导致效果功能重新运行并开始另一个超时。这种方法的一个附带好处是可以更好地与用户互动：如果用户手动推进幻灯片，超时将被重置，幻灯片将等待5秒钟再次更改（而间隔时间，幻灯片可能会立即更改）用户恰好在间隔的下一次预定运行之前单击了鼠标。

如何将此setInterval函数添加到此React代码？

1 个答案: