大家好，我在我的项目中使用 ReactJs，我有一个这样的代码块
background-position: 50% 38%;正如您在 import React, {useEffect} from 'react';
import './CurrentStory.css';
export default function CurrentStory({currentStory}) {
const {created, username, avatar, mediaList} = currentStory;
useEffect(() => {
const progress = Array.from(document.querySelectorAll('.progress'));
const playNext = (e) => {
const current = e && e.target;
let next;
console.log(current, 'current');
if (current) {
const currentIndex = progress.indexOf(current);
if (currentIndex < progress.length) {
next = progress[currentIndex + 1];
}
current.classList.remove('active');
current.classList.add('passed');
}
if (!next) {
progress.map((el) => {
el.classList.remove('active');
el.classList.remove('passed');
});
next = progress[0];
}
next.classList.add('active');
// status.innerText = 'Current: ' + progress.indexOf(next);
};
playNext();
}, []);
return (
<div className="current__story">
<div className="current__story__header">
<div className="current__story__progress__container">
{mediaList.map((media, index) => (
<div
key={index}
style={{animationDuration: `${media.duration}s`}}
className="progress passed"
></div>
))}
</div>
<div className="current__story__controls">
<div className="current__story__controls__user__info">
<img src={avatar} alt="" />
<span>{username}</span>
<span>{created} giờ</span>
</div>
<div className="current__story__option__btn__container"></div>
</div>
</div>
<div className="current__story__footer"></div>
</div>
);
}
中看到的，我有 useEffect 返回一个数组，现在我希望数组中的每个项目从状态的最开始都会添加一个 className {{1 }} 并且如果动画持续时间结束，那么它将添加类 progress 以将动画运行到数组的下一项，我尝试 active passed 和 {{ 1}} 但它们都返回 console.log。无论如何我可以使用 current
如果可能，请随时修改此代码和框链接中的代码here
非常感谢，祝您有美好的一天