Как изменить свойство стиля моих массивов в componentDidMount ()?

Question

Я сделал визуализатор алгоритма сортировки, который отображает вертикальные полосы разной высоты и сортирует их. Я использовал здесь кнопку «Создать новый массив», которая будет вызывать функцию для генерации нового массива каждый раз, и я также использовал эту функцию в функции componentDidMount (). Как изменить свойство стиля, когда я нажимаю эту кнопку? Я попытался взять document.getElementByClassName('array-bars') в массив и изменить его свойство стиля, используя l oop, но это не принесло пользы. Я добавляю необходимый код ниже.

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

Отредактировано: это функция, в которой я изменяю свойство стиля, используя метод, написанный в приведенном выше коде. Это работает здесь. Кроме того, можете ли вы сказать, как я могу изменить цвет в этом 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' });
  }
}