React.js中的纺车

Question

我正在使用React.js创建一个彩票应用。有一个SVG格式的纺车。 你可以旋转一个轮子，它在一个给定的位置平稳地停止（我的应用程序使它成为随机位置）。

我把这个轮子变成了你使用的React.js组件：

<Wheel items={items} fullSpins={5} angle={0} />

参数是：

• [array] 项目
  轮子的一部分定义了它们的颜色，比例等。
• [int] fullSpins
  在以要求的角度停止之前，车轮旋转了多少次。这是为了视觉吸引力和更多的刺激。
• [float：0..360] 角度
  车轮即将停止的角度。

我希望任何其他组件能够旋转方向盘，所以我认为React.js类似的方法是在属性更改时执行此操作。更改angle后，我会设置transform: rotate(Xdeg)，其中X为current angle + fullSpins * 360 + angle。使用transition-property: transform它可以顺利播放。

我不确定如何处理它React方式。通常我会考虑一种只能传递给车轮的方法，但旋转是车轮本身的内部行为。完美的是，它只会在angle属性更新上旋转。但是，如果我想把它旋转到相同的位置怎么办，比如当连续两次决定将它停在90.0度的角度时呢？

我应该使用componentWillReceiveProps()吗？如果是这样，当前一个角度相同时，如何知道是否实际请求了新的旋转？

Answer 1

您可以使用componentDidUpdate()检查道具是否已更改，然后相应地调用您的旋转功能。

这样的事情：

class Wheel extends Component {

    componentDidUpdate(prevProps){
        if(prevProps.angle !== this.props.angle) this.spinFunction()
    }

    spinFunction(){
        // update transform: rotate(Xdeg) etc here
    }
}