我正在嘗試使用反應可視化冒泡排序演算法。
新反應，感謝幫助 - 我看到了類似的問題，但無法讓它作業
在我的主app.jsx中，我有以下代碼設定來創建必要的 DOM 元素：
...
let test_arr = [10, 4, 30, 7, 15, 5, 30, 6];
return (
<div className="sorting_container">
{test_arr.map((num, index) => (
<DataBlock val={num} pos={index} key={index} />
))}
</div>
);
...
對應的DataBlock.jsx組件：
import React from "react";
class DataBlock extends React.Component {
constructor(props) {
super(props);
this.height_multiplier = 3.5;
this.position_multiplier = 42;
}
render() {
return(
<div id={`DataBlock${this.props.pos}`} className="DataBlock"
style={{
height: `${ this.height_multiplier * parseInt(this.props.val) }px`,
transform: `translateX(${ parseInt(this.props.pos) * this.position_multiplier }px)`
}}
>
<label>{this.props.val}</label>
</div>
);
}
}
export { DataBlock };
使用上面的代碼，我能夠生成我想要的輸出：
為了簡化我想要的： 為了可視化演算法，我需要能夠更改每個 DataBlock 元素的樣式。為了向您展示我的問題，我通過將每個 DataBlock 的 backgroundColor 更改為紅色來簡化程序 - 每次增量為 1，每次更改之間暫停 1 秒。
為了實作這一點，我在app.jsx中使用“useEffect”來呼叫 BubbleSort.jsx。
...
useEffect(() => {
BubbleSort();
});
...
我的BubbleSort.jsx檔案：
function BubbleSort() {
let datablocks = document.getElementsByClassName("DataBlock");
for(let i=0;i<datablocks.length;i ) {
setTimeout(() => {
document.getElementById(`DataBlock${i}`).style.backgroundColor = "red";
}, 1000)
}
}
export default BubbleSort;
該代碼在 1 秒后立即將所有元素從綠色背景更改為紅色。我希望它以 1 秒的暫停分別更改每個元素。我怎樣才能做到這一點，或者我的方法從一開始就錯了？
uj5u.com熱心網友回復：
您必須使 for 回圈超時。i * 1000您可以通過延遲超時來實作這一點。嘗試這個;
function BubbleSort() {
let datablocks = document.getElementsByClassName("DataBlock");
for(let i=0;i<datablocks.length;i ) {
setTimeout(() => {
document.getElementById(`DataBlock${i}`).style.backgroundColor = "red";
}, i * 1000)
}
}
export default BubbleSort;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/529020.html