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