Classname 道具不會隨着 React 中的條件渲染而更新

Question

我正在嘗試在反應中建立一個輪播。 出於某種原因，${fadeIn? styles.fade_in: ""} className 中用於呈現 animation 的行無效。 即使我在調用 handelSlider 時將其設置為 false，它仍然呈現 fade_in animation，導致輪播自動移動到第三張圖像

我雖然使用容器來包裹圖片，並將它們放在父 div 中，並將 flex 設置為 100%，這樣我就可以有條件地更改每張照片的 position。 每次渲染過渡 animation 后，我刪除 animation 然后交換當前和下一個 piture，以便為下一個 animation 重置。但是，由於某種原因，即使 fadein state 設置為 false，仍然添加了 fadein css 道具. 好迷茫，求助`

const Slider = () => {
  const bannerPics = [banner1, banner2, banner3];
  const [fadeIn, setFadeIn] = useState(false);
  const [prev, setPrev] = useState(0);
  const [next, setNext] = useState(1);

  const prevPic = <img src={bannerPics[prev]} alt="" />;
  const nextPic = <img src={bannerPics[next]} alt="" />;

  const handelSlider = () => {
    setFadeIn(!fadeIn);
    setFadeIn(!fadeIn);
    setTimeout(() => {
      console.log(fadeIn);
      if (next === bannerPics.length - 1) setNext(0);
      else {
        setPrev(prev + 1);
        setNext(next + 1);
      }
    }, 3000);
  };

  return (
    <div>
      <div className={styles.banner}>
        <div
          className={`${styles.pic_container} ${fadeIn ? styles.fade_in : ""}`}
        >
          {prevPic}
        </div>
        <div
          className={`${styles.pic_container} ${fadeIn ? styles.fade_in : ""}`}
        >
          {nextPic}
        </div>
      </div>
      <button onClick={handelSlider}>MOVE</button>
    </div>
  );
};

export default Slider;

`

Answer 1

我想你正在做這樣的事情：

  const handleSlider = () => {
    if (fadeIn) return;
    setFadeIn(true);
    setTimeout(() => {
      setPrev((i) => (i + 1) % bannerPics.length);
      setNext((i) => (i + 1) % bannerPics.length);
      setFadeIn(false);
    }, 1000);
  };

.pic-container {
  opacity: 1;
  transition: opacity 1s;
}

.fade-in {
  opacity: 0;
}

調用 class / 變量 just fade可能更准確，因為它同時控制淡入和淡出。

https://stackblitz.com/edit/react-ts-n6sug4?file=App.tsx