reactjs - setInterval 更改元素的类名

Question

我有一个演示。

我有一组要淡入和淡出的文本元素，我想淡入第一个元素然后淡出它，然后淡入第二个元素以创建一种轮播。

我有 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'));

标签： reactjs