Вращающееся колесо в React.js ⇐ CSS

[Anonymous]

Я создаю лотерейное приложение с помощью React.js. В формате SVG есть вращающееся колесо.
Вы можете вращать колесо, и оно плавно останавливается в заданной позиции (мое приложение делает это в случайном положении).




Я сделал колесо компонентом React.js, который вы используете следующим образом:

Код: Выделить всё

Параметры:

• [array] items
  
  Части колеса, определяющие их цвет, пропорции и т. д.
• [int] fullSpins
  
  Сколько вращений колесо делает, прежде чем остановиться на запрошенном угле. Это сделано для визуальной привлекательности и большего удовольствия.
• [float: 0..360] angle
  
  Угол в градусах, при котором колесо вот-вот остановится.

Мне бы хотелось, чтобы любой другой компонент мог вращать колесо, поэтому я предполагаю, что способ сделать это в стиле React.js будет заключаться в изменении свойства. При изменении угла я бы установил преобразование: Rotate(Xdeg), где X — текущий угол + fullSpins * 360 + угол. С помощью свойства перехода: Transform он вращается плавно.

Я не уверен, как с этим справиться в React. Обычно я рассматриваю метод, который просто передается колесу, но вращение — это внутреннее поведение самого колеса. В идеале, это просто вращалось бы при обновлении свойства angular. Однако что, если я захочу повернуть его в одно и то же положение, например, когда два раза подряд было решено остановить его под углом 90,0 градусов?

Должен ли я использовать компонентWillReceiveProps()? Если да, то как узнать, действительно ли было запрошено новое вращение, когда предыдущий угол был таким же?

Подробнее здесь: https://stackoverflow.com/questions/495 ... n-react-js