Анимация при обновлении реквизита компонента

Question

У меня есть компонент, который получает реквизиты от родительского компонента, в котором этот родительский компонент получает состояние из моего хранилища с избыточностью.Моя цель здесь состоит в том, чтобы при обновлении этого магазина я хотел, чтобы реквизиты высветили цвет, указывающий, что он изменился.Моя логика до сих пор заключается в дочернем компоненте:

  componentDidUpdate(prevProps) {
    if (this.props.price !== prevProps.price) {
      // Price will update correctly, but I want to make it flash a color, 
      // indicating that it's changed. I want it to also flash whenever the 
      // price DOESN'T === the previous price
    }
  }

В настоящее время я также использую styled components, поэтому мне было интересно, как я могу включить это, чтобы он работал.

ЭтоВот как я рендеринг сказал цену:

render() {
  const { tradOverrides: { price } } = this.props

  return (
    <StyledDetails>
      <h3>Rent</h3>
      <p>${price}</p>
    </StyledDetails>
  )
}

Теперь, обновление цены работает , но моя единственная проблема в том, что я очень потерян на какпримените вспышку цвета при обновлении (т. е. при изменении цены с $ 40 на $ 78, $ 78 начнет мигать зеленым, а затем вернется к своему первоначальному установленному цвету.).Я что-то упускаю?Я неправильно подхожу к этому, используя componentDidUpdate?Или это можно сделать через styled components?

Answer 1

Я думаю, что вы можете установить флаг в локальном состоянии, а затем, основываясь на этом флаге, загрузить стилизованный компонент с помощью CSS для отображения цены.Примерно так:

    state = {
    flashFlag:false
    }
         componentDidUpdate(prevProps) {
            if (this.props.price !== prevProps.price) {
                   this.setState({flashFlag:true})
            }
            else {
             this.setState({flashFlag:false})
               }
          }


  return (
    {this.flashFlag ?
<FlashStyledDetails>
      <h3>Rent</h3>
      <p>${price}</p>
    </FlashStyledDetails> :
<StyledDetails>
      <h3>Rent</h3>
      <p>${price}</p>
    </StyledDetails>
}
  )

Вам нужно добавить CSS для перепрошивки в этом стилизованном компоненте:

 <FlashStyledDetails>