Spinnrad in React.js ⇐ CSS

[Anonymous]

Ich erstelle eine Lotterie-App mit React.js. Es gibt ein Spinnrad im SVG-Format.
Sie können ein Rad drehen und es stoppt sanft an einer bestimmten Position (meine App macht es zu einer zufälligen Position).




Ich habe das Rad zu einer React.js-Komponente gemacht, die Sie wie folgt verwenden:

Code: Select all

Parameter sind:

• [array] Elemente
  
  Teile des Rades, die ihre Farbe, Proportionen usw. definieren.
• [int] fullSpins
  
  Wie viele Drehungen das Rad macht, bevor es im gewünschten Winkel stoppt. Dies dient der optischen Attraktivität und sorgt für mehr Nervenkitzel.
• [float: 0..360] Winkel
  
  Der Winkel in Grad, bei dem das Rad gestoppt werden soll.

Ich möchte, dass jede andere Komponente das Rad drehen kann, daher gehe ich davon aus, dass die React.js-ähnliche Vorgehensweise darin besteht, dies bei einer Eigenschaftsänderung zu tun. Wenn der Winkel geändert wird, würde ich die Transformation festlegen: rotation(Xdeg), wobei X der aktuelle Winkel + fullSpins * 360 + Winkel ist. Mit Transition-Property: Transform dreht es sich reibungslos.

Ich bin mir nicht sicher, wie ich damit umgehen soll. Normalerweise würde ich eine Methode in Betracht ziehen, die einfach an das Rad übergeben wird, aber das Drehen ist ein internes Verhalten des Rades selbst. Perfekt, es würde sich einfach bei der Aktualisierung der Angle-Eigenschaft drehen. Was aber, wenn ich es an die gleiche Position drehen möchte, beispielsweise als zwei Mal hintereinander beschlossen wurde, es bei einem Winkel von 90,0 Grad anzuhalten?

Soll ich ComponentWillReceiveProps() verwenden? Wenn ja, wie kann man dann wissen, ob die neue Drehung tatsächlich angefordert wurde, obwohl der vorherige Winkel derselbe war?