如何在componentDidMount()中改变数组条的样式属性？

Question

我做了一个排序算法可视化器，它可以显示不同高度的竖条并对它们进行排序。我在这里使用了一个名为 "Generate new Array "的按钮，它每次都会调用一个函数来生成新的数组，我也在componentDidMount()函数中使用了这个函数。我如何在每次点击该按钮时改变样式属性？我试着用 document.getElementByClassName('array-bars') 到一个数组中，并使用循环改变它的样式属性，但它没有发生。我在下面添加了必要的代码。

{ //array is const storing array of numbers which is also only state of this program.
  array.map((value, idx) => (
    <div
      className="array-bar"
      key={idx}
      style={{ height: value, backgroundColor: 'turquoise' }}></div>))
}

componentDidMount(){
  this.resetArray();
}

// this is called when I click generate new array    
resetArray(){
  const array = [];
  for (let i = 0; i < 300; i++) {
    array.push(randomIntFromInterval(15, 650));
  }
  const arrayBars = document.getElementByClassName('array-bar');
  for (let i = 0; i < arrayBars.length; i++)
    arrayBars[i].style.backgroundColor = 'green'; //this is failing

  this.setState({ array });
}

Edited:这是我用上面代码中的方法改变样式属性的函数。另外，你能告诉我如何改变最后这个mergeSort()中的颜色吗？this.setState() 最后，但这只是在开始时改变颜色。

 mergeSort(){
         for(let i=0;i<animations.length;i++){
             const arrayBars= document.getElementsByClassName('array-bar');
             const colorChange=i%3!==2;
             if(colorChange){
                 const [barOne,barTwo] =animations[i];
                 const barOneStyle=arrayBars[barOne].style;
                 const barTwoStyle=arrayBars[barTwo].style;
                 const color=i%3===0?'red':'turquoise';
                 setTimeout(()=>{
                    barOneStyle.backgroundColor=color;
                    barTwoStyle.backgroudColor=color;
                 },i*2);
             }
             else{
                 setTimeout(()=>{
                    const[barOne,newHeight]=animations[i];
                    const barOneStyle=arrayBars[barOne].style;
                    barOneStyle.height=newHeight+'px';
                 },i*2)
             }
         }
    }

Answer 1

在React中，你应该依靠 状况 的变化，以 "让事情发生"。如问题评论中的其他建议，设置一个包含初始背景颜色的初始状态，并根据需要更新该值。更新：如果你想让变化在按钮点击后发生，只需设置它的 onclick 属性来指向一个你想要的函数。在这里，我添加了一个按钮，并将它的 onclick 归于 resetArrays.

class YourComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      barBg: 'turquoise'
    }
  }

  render(){
    return <div>
     <button onClick={this.resetArray.bind(this)}>Generate new array</button>
     { //array is const storing array of numbers which is also only state of this program.
      array.map((value, idx) => (
        <div
         className="array-bar"
         key={idx}
         style={{ height: value, backgroundColor: this.state.barBg }}></div>))
      }
     </div>
  }

  componentDidMount(){
    this.resetArray();
  }

  // this is called when I click generate new array    
  resetArray(){
    const array = [];
    for (let i = 0; i < 300; i++) {
      array.push(randomIntFromInterval(15, 650));
    }

    this.setState({ array, barBg: 'green' });
  }
}