问题描述
我是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仍然不满意。关于可能出什么问题的任何建议?任何帮助深表感谢!
解决方法
如果要一个接一个地执行此操作,则必须像这样增加计时器:
from collections import Counter
from itertools import combinations,chain
text = ['Lion Monkey Elephant Weed','Tiger Elephant Lion Water Grass','Lion Weed Markov Elephant Monkey Fine','Guard Elephant Weed Fortune Wolf']
def count_combinations(text,n_words,n_most_common=None):
count = []
for t in text:
words = t.split()
combos = combinations(words,n_words)
count.append([" & ".join(sorted(c)) for c in combos])
return dict(Counter(sorted(list(chain(*count)))).most_common(n_most_common))
count_combinations(text,2)
setTimeout是异步的,它不会阻止执行。
UP:要在setTimeout中保留实际的for(i=0;i<this.arrayRef.length;i++){
setTimeout(()=>{
this.arrayRef[i].style.backgroundColor = 'red';
},500 * i)
}
,必须将其设置为参数:
i
在您的代码中,所有的超时都在AFTER循环之后执行,因此for(i=0;i< 10;i++){
setTimeout(i=>{
console.log(i);
},500 * i,i)
}
包含array.length值:
i
您还可以使用let防止计数器丢失:
for(i=0;i< 10;i++){
setTimeout(()=>{
console.log(i);
},500 * i)
}