使用 React 在循环中更改路径答案

【问题标题】：Change path in loop with React使用 React 在循环中更改路径
【发布时间】：2020-10-10 12:46:41
【问题描述】：

我想用循环改变 javascript 中的样式。在 Vanilla 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

感谢您的帮助！

【问题讨论】：

在您的第一个示例中，const 是块作用域，每次迭代都会创建一个新变量，保存不同 DOM 元素的值。要使用 ref 进行这项工作，您同样需要将 ref 附加到每个 JSX 元素。我不确定上下文，但附加一个添加相应样式的条件类会更直接。
直接使用 dom 元素不是反应方式。您应该将动画作为道具传递并在 jsx 渲染中使用它。

标签： javascript reactjs loops for-loop styles

【解决方案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，比如“startpath+i”？我可以这样做吗？

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

【讨论】：

【解决方案2】：

在数组中插入 startpath 就足够了

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);
        }

【讨论】：