私はまだReactでかなり新しいですが、ゆっくりと作業を続けており、行き詰まっていることに遭遇しました。
私はReactで「タイマー」コンポーネントを構築しようとしていますが、正直に言うと、これが正しく(または効率的に)行われているかどうかわかりません。以下の私のコードでは、私は、オブジェクトを返すように状態を設定{ currentCount: 10 }
し、いじるされているcomponentDidMount
、componentWillUnmount
と、render
私は唯一の10から9に「カウントダウン」に状態を得ることができます。
2つの部分からなる質問:何が問題になっていますか?そして、(componentDidMount
&を使用するよりも)setTimeoutを使用するより効率的な方法がありますcomponentWillUnmount
)ますか?
前もって感謝します。
import React from 'react';
var Clock = React.createClass({
getInitialState: function() {
return { currentCount: 10 };
},
componentDidMount: function() {
this.countdown = setInterval(this.timer, 1000);
},
componentWillUnmount: function() {
clearInterval(this.countdown);
},
timer: function() {
this.setState({ currentCount: 10 });
},
render: function() {
var displayCount = this.state.currentCount--;
return (
<section>
{displayCount}
</section>
);
}
});
module.exports = Clock;
this.timer.bind(this)
this.timerはそれ自体では機能しなかったので、私はこれを追加して動作させました
class Clock extends Component
自動バインドしますが、自動バインドしません。したがって、バインドする必要があるかどうかは、コンポーネントの作成方法によって異なります。
bind(this)
もう必要ありません。reactはこれだけですぐに動作します。