javascript - React.js 中的纺车

Question

我正在使用 React.js 创建一个彩票应用程序。有一个 SVG 格式的纺车。您可以旋转一个轮子，它会平稳地停在给定的位置(我的应用程序将其设为随机位置)。

我把轮子变成了一个 React.js 组件，你可以这样使用:

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

参数是:

• [数组] 元素
  轮子的各个部分定义了它们的颜色、比例等。
• [int] fullSpins
  在以请求的 Angular 停止之前，轮子转了多少圈。这是为了视觉吸引力和更多刺激。
• [float: 0..360] Angular
  车轮即将停止的 Angular (以度为单位)。

我希望任何其他组件都能够旋转轮子，所以我假设类似 React.js 的方法是在属性更改时执行此操作。当 angle 改变时，我会设置 transform: rotate(Xdeg)，其中 X 是 current angle + fullSpins * 360 + angle。使用 transition-property: transform 它可以平滑地旋转。

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

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

Answer 1

您可以使用 componentDidUpdate() 检查 props 是否已更改，然后相应地调用您的自旋函数。

像这样:

class Wheel extends Component {

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

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