使用 React 在循环中更改路径

Question

我想用循环更改javascript中的样式。在香草js中，这是有效的：

for(let i=1; i<13; i++){
const path1 = document.querySelector(".path"+i);
path1.style.animation = "animate 1.4s forwards";
}

但是现在我尝试学习 React，但我很难达到同样的效果。我使用参考：

startpath1 = createRef();
for(let i=1; i<13; i++){
this.startpath1.current.style.animation = "animate 1.4s forwards";
}

这段代码有效，但我如何在这里更改"startpath1"，例如 startpath + i

我将感谢您的帮助！

Answer 1

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const demo = async() => {
await sleep(100);
if(ready1){
for(let i=1; i<13; i++){
this.startpath1.current.style.animation = "animate 1.4s forwards";
await sleep(200);
}
}
}
demo()

这都是代码的上下文，这就是为什么我希望它在循环中，我希望每次迭代都有一些休息。我可以在反应中用这种方式做到这一点吗，我如何在每次迭代时更改启动路径，例如"startpath+i"？我能做到吗？

我知道还有其他方法可以做到这一点，但我关心这个，谢谢你的回答！

Answer 2

在数组中插入起始路径就足够了

const tab = [this.startpath0, this.startpath1]
for(let i=0; i<13; i++){
tab[i].current.style.animation = "animate 1.4s forwards";
await sleep(200);
}