Reactjs setInterval更改元素的类名

我有一本书

我有一组文本元素，我想淡入淡出，我想淡入第一个元素，然后淡出，然后淡入第二个元素来创建一种旋转木马

我有css@keyframes可以进行淡入淡出

我希望在每个文本元素中添加和删除一个类来使用淡入淡出动画

所以我想使用setInterval或类似的东西，选择元素添加类，然后删除它

如何使用类选择元素，以及如何在setInterval中执行此操作

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {

  useEffect(() => {
  const interval = setInterval(() => {

  }, 1000);
    return () => clearInterval(interval);
  }, []);

  const colors = [
    'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
  ]

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p className={'title-'+i}>{color}</p>
      ))}
    </div>
  );
}

render(<App />, document.getElementById('root'));

import React，{Component，useState，useffect}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
常量应用=（）=>{
useffect（（）=>{
常量间隔=设置间隔（（）=>{
}, 1000);
return（）=>clearInterval（interval）；
}, []);
常量颜色=[
“红色”、“绿色”、“蓝色”、“棕色”、“黄色”、“黑色”
]
返回(
{colors.map（（color，i）=>(
{color}
))}
);
}
render（，document.getElementById（'root'））；

您将使用动态

颜色数组还是将始终使用静态数组？您可以利用useState跟踪可用数组中的当前索引。在useEffect中，您可以使用间隔更改状态中的当前索引。仅添加“活动”类，例如，如果当前处于状态的索引与颜色的索引匹配。这不会直接回答您的问题，但您可能希望签出并查找线索。它超级简单，它做你想做的事。