如何使用 material-ui 在反应中动态添加/删除类名？

Question

如何动态添加/删除类到 img 标签。 基本上我想每 2 秒自动更改一次图像，就像 Instagram 注册页面一样。 但我不知道如何使用 material-ui 方法来做到这一点。 这是我的代码，我想添加某些类并定期删除它们。

<div className={classes.phoneImageWrapper}>
  <img src={Phone1} alt="instagram" className={classes.phoneImage} />
  <img src={Phone2} alt="instagram" className={classes.phoneImage} />
  <img src={Phone3} alt="instagram" className={classes.phoneImage} />
  <img src={Phone4} alt="instagram" className={classes.phoneImage} />
  <img src={Phone5} alt="instagram" className={classes.phoneImage} />
</div>

这是我的 styles 我想每 2 秒后向 img 添加/删除 phoneImageAnimation 和 phoneImageVisible

phoneImageWrapper: {
  margin: "10px 0 0 151px",
  position: "relative",
},
phoneImage: {
  top: 100,
  left: 0,
  position: "absolute",
  width: 240,
  height: 427,
  opacity: 0,
  visibility: "hidden",
},
phoneImageAnimation: {
  transition: "opacity 1.5s ease-in",
  zIndex: 2,
},
phoneImageVisible: {
  opacity: 1,
  visibility: "visible",
}

Answer 1

我认为您可以在useEffect挂钩中使用setInterval 。 像这样。

 const [activeIndex, setActiveIndex] = useState(0);

 const images = [
   <img src="/1.webp" alt="1" />,
   <img src="/2.png" alt="2" />,
   <img src="/3.webp" alt="3" />
 ];

  useEffect(() => {
    let timer = setInterval(() => {
      setActiveIndex((prevIndex) => {
        return (prevIndex + 1) % images.length;
      });
    }, 2000);

    return () => {
      clearInterval(timer);
    };
  }, []);

对于 animation 你可以使用react-transition-group

我为您创建了一个示例。 codepen_link

Answer 2

您可以使用clsx库。 这是一个专门为此而设计的方便帮手。

创建一个 state image ，每 2 秒在每个图像（索引或名称）之间旋转

<div className={classes.phoneImageWrapper}>
  <img src={Phone1} alt="instagram" 
       className={clsx(classes.phoneImage, image==0 && classes.phoneImageVisible )} />
  <img src={Phone2} alt="instagram" 
       className={clsx(classes.phoneImage, image==1 && classes.phoneImageVisible )} />
  <img src={Phone3} alt="instagram" 
       className={clsx(classes.phoneImage, image==2 && classes.phoneImageVisible )} />
  <img src={Phone4} alt="instagram" 
       className={clsx(classes.phoneImage, image==3 && classes.phoneImageVisible )} />
  <img src={Phone5} alt="instagram" 
       className={clsx(classes.phoneImage, image==4 && classes.phoneImageVisible )} />
</div>

Answer 3

您可以使用setInterval和useState更改 class 的 state。

假设您有一组要每 2 秒更改一次的类：

const classes = ['a', 'b', 'c'];

然后，您有一个 state，它是当前类名的索引：

const [i, setI] = useState(0);

在useEffect上，您开始间隔并更改索引的 state：

useEffect(() => {
    setInterval(() => setI((i+1) % classes.length), 2000);
});

您现在唯一需要的是使用className中的 classes 数组，如下所示：

<div className={classes[i]}></div>

你完成了！