Question

我有一个组件从父组件接收道具，其中该父组件从我的redux商店接收状态。我的目标是当redux商店更新时，我希望道具闪烁一种颜色，表明它已经改变了。到目前为止，我的逻辑是在子组件中：

  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>

动画组件的道具更新动画

1 个答案: