Есть ли способ динамически изменить свой стиль, используя состояние в React?

Question

Мой код React ниже. Я импортировал 6 иконок для игры в кости из FontAwesome, и цель состоит в том, чтобы заставить их вращаться как кости и менять номер. При нажатии на кнопку я go получаю функцию diceRoll, которая возвращает мне случайные итоги вращения, числа скоростей (из se c.) И выбор кубиков. Я также пытаюсь получить числа вращения и скорости для динамической настройки стиля анимации вращения css. Есть также другие функции setTimeout, которые я хочу использовать для изменения числа, как это происходит при броске.

import React, { Component } from 'react';
import './style.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDiceOne, faDiceTwo, faDiceThree, faDiceFour, faDiceFive, faDiceSix } from '@fortawesome/free-solid-svg-icons';

export default class ExNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dice: faDiceOne,
            speed: 0,
            spin: 0,
            roll: '{animation: spin 0s ease 0}'
        }
        this.diceMove = this.diceMove.bind(this);
        this.diceSet = this.diceSet.bind(this);
        this.diceRoll = this.diceRoll.bind(this);
    }

    randNum() {
        return Math.floor(Math.random()*6);
    }

    diceOptions() {
        return [faDiceOne, faDiceTwo, faDiceThree, faDiceFour, faDiceFive, faDiceSix];
    }

    diceMove(speed, spin) {
        this.setState({
            roll: `{animation: spin ${speed}s ease ${spin}}`
        })
        setTimeout(
            this.setState({
                roll: '{animation: spin 0s ease 0}'
            }), this.state.speed * 1000
        )
    }

    diceSpeed() {
        return Math.random()*1.5;
    }

    diceSpin() {
        return Math.floor(Math.random()*3) + 1;
    }

    diceRoll() {
        const diceNumOne = this.randNum();
        const diceNumTwo = this.randNum();
        const speed = this.diceSpeed();
        const spin = this.diceSpin();
        const dice = this.diceOptions();
        this.setState({
            speed,
            spin
        });
        this.diceMove(this.state.speed, this.state.spin)
        setTimeout(
            this.setState({
                dice: dice[diceNumOne]
            }), this.state.speed*500
        );
        setTimeout(
            this.setState({
                dice: dice[diceNumTwo]
            }), this.state.speed*1000 + 250
        );
    }

    diceSet() {
        const diceNum = this.randNum();
        const dice = this.diceOptions();
        this.setState({
            dice: dice[diceNum]
        })
    }

    componentDidMount() {
        this.diceSet();
    }

    render () {
        return (
             <FontAwesomeIcon 
                   id="dice" 
                   className="dice-roll text-purple nav-text" 
                   icon={this.state.dice} 
                   style={this.state.roll} 
                   onClick={this.diceRoll}
             />
        );
    }
}

diceSet работает, но части setTimeout не работают.

Мой стиль. css код выглядит следующим образом:

.dice-spin {
  animation: spin;
}

@keyframes spin {
  0%{
    transform: rotate(0deg);
  }
  25% {
        transform: rotateZ(30deg);
    }
    50% {
        transform: rotateZ(270deg);
    }
    75% {
        transform: rotateZ(180deg);
    }
  100% {
        transform: rotateZ(360deg);
    }
}

У меня есть в результате столкнуться со следующей ошибкой:

TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

Кто-нибудь еще преодолел эту проблему?

Answer 1

В настоящее время вы устанавливаете state.roll как строку, в то время как React ожидает, что реквизит стиля будет объектом.

Попробуйте установить ваше состояние следующим образом:

this.setState({
    roll: { animation: `spin ${speed}s ease ${spin}` }
})