类名属性不会在 React 中使用条件渲染进行更新

Question

我试图在react中构建一个旋转木马。由于某种原因，${fadeIn ?风格。className中用于渲染动画的fade_in: "}行不起作用。即使我在调用handelSlider时将其设置为false，它仍然会渲染fade_in动画，导致carousel自动移动到第三张图像

我的想法是使用一个容器来包装图片，并把它们放在父div与flex设置为100%，所以我可以有条件地改变每个照片的位置。每次渲染过渡动画后，我都会删除动画，然后交换当前和下一个图像，以便为下一个动画重置。然而，由于某些原因，即使当淡出状态设置为false时，仍然添加了淡出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;
}

将类/变量命名为fade可能更准确，因为它同时控制淡入和淡出。

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