@asmut

Как заставить обновляться компоненту?

Добрый день.
Хочу заставить секундную стрелку двигаться.
Сейчас она двигается только при обновлении.
Решил что setInterval() неплохо подходит, вот только все же еще не хватает понимания React.Component
и вообще философии React.

Если несложно покажите как такое реализовать, и если подхожу неверно то готов услышать критику.

const deg = 6;

class Hod extends React.Component {

    constructor(props) {
        super(props);

        let day = new Date();

        this.state = {
            hh: 0,
            mm: 0,
            ss: new Date().getSeconds() * deg
        };
    }

    // updateCount() {
    //     this.setState((prevState, props) => {
    //             return {
    //                 ss: new Date().getSeconds() * 6
    //             }
    //         }
    //     )
    // }



    componentDidMount() {
        setInterval(() => {

            // let hh = day.getHours() * 30;
            // let mm = day.getMinutes() * deg;
            this.state.ss = new Date().getSeconds() * 6;
        })
    }

    render() {

        return (
            <div className={s.clock}>
                {/*<div className={s.hour}>*/}
                {/*    <div*/}
                {/*        className={s.hr}*/}
                {/*        id="hr"*/}
                {/*        style={{transform: `rotateZ(${this.props.hh}deg)`}}*/}
                {/*    >*/}

                {/*    </div>*/}
                {/*</div>*/}

                {/*<div className={s.min}>*/}
                {/*    <div className={s.mn}*/}
                {/*         id="mn"*/}
                {/*         style={{transform: `rotateZ(${this.props.mm}deg)`}}>*/}
                {/*    </div>*/}
                {/*</div>*/}

                <div className={s.sec}>
                    <div
                        className={s.sc}
                        id="sc"
                        style={{transform: `rotateZ(${this.state.ss}deg)`}}
                    >

                    </div>
                </div>
            </div>
        )
    }
}

function App() {

    return (
        <Hod />
    );
}
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
UpdateCount разкомментируйте и не забываем ставить кол-во миллисекунд в setInterval

componentDidMount() {
  setInterval(() => {
    this.updateCount()
  }, 1000) 
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы