使用setTimeout暂停执行以添加动画

问题描述

我是react js的初学者，在操作函数中的DOM元素时遇到困难。
我正在尝试使用react构建排序可视化程序。为此，我有一个使用映射功能由数组组成的div：

{array.map((value,index) => (
    <div>
        <div 
            className="bar" 
            key={index} 
            ref = {(value) => this.arrayRef[index] = value}
            style={{height: `${value}px`}}></div>
    </div>
))}

如您所见，我创建了一个参考，以便可以使用以下方法为过渡设置动画：

this.arrayRef[i].style.backgroundColor = 'blue'

现在，当我使用for循环更新整个数组的颜色时，出现一个错误，提示“无法读取未定义的属性样式”。之前我使用document.getElementsbyClassName访问div栏，但阅读了几篇文章后，到目前为止，我收集到的是使用refs更好，因为如果我们尝试在访问DOM之前访问DOM，则document.getElementsbyClassName会出现错误。元素已创建。

# this is what i meant 
for(i=0;i<this.arrayRef.length;i++){
    setTimeout(()=>{
        this.arrayRef[i].style.backgroundColor = 'red';
    },500)
}

我认为问题可能出在这里的setTimeout上，因为如果我省略setTimeout部分，则整个数组的颜色会根据需要更改。但是我想以某种方式显示动画，所以我希望它在为整个数组的每个元素上色之前先暂停一会儿，而不是仅在没有任何暂停的情况下更改颜色。为此，我认为setTimeout将是最好的选择，我尝试使用async / await，但是我对使用promise仍然不满意。关于可能出什么问题的任何建议？任何帮助深表感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript reactjs reactjs visualizer