React で setInterval 関数を使用する例

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています。Windows 10


1. setInterval関数

(1)定義

setInterval() メソッドは、指定された期間 (ミリ秒単位) で関数を呼び出したり、式を評価したりします。
setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じられるまで、関数を繰り返し呼び出します。 setInterval() によって返される ID 値は、clearInterval() メソッドのパラメーターとして使用できます。

(2)例

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'antd' から { Radio, Button, Icon } をインポートします。

クラスListはComponentを拡張します{
  コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      オンライン: 偽、
    };
  };

  ハンドルログイン=()=>{
    localStorage.setItem('ユーザー名','xuzheng');
  };

  ハンドルログアウト=()=>{
    localStorage.removeItem('ユーザー名');
  };

  コンポーネントマウント(){
    this.timer = setInterval(() => {
      this.setState({
        オンライン: localStorage.username ? true : false,
      })
    }, 1000);
  }

  コンポーネントのマウントを解除します(){
    if (this.timer != null) {
      タイマー間隔をクリアします。
    }
  }

  与える() {
    戻る (
      <div>
        <div>
          <アイコン タイプ='ユーザー' スタイル={{marginRight:'8px'}}/>
          <span>{localStorage.username ? localStorage.username : 'ログインしていません'}</span>
        </div>
        <div スタイル={{marginTop:'20px'}}>
          <Button type='primary' onClick={this.handleLogin}>ログイン</Button>
        </div>
        <div スタイル={{marginTop:'20px'}}>
          <Button type='primary' onClick={this.handleLogout}>ログアウト</Button>
        </div>
      </div>
    )
  }
}

デフォルトリストをエクスポートします。

React での setInterval 関数の使用に関するこの記事はこれで終わりです。React での setInterval 関数の使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactエラー境界コンポーネント処理
  • react setStateの詳細な説明
  • 簡潔なReactコンポーネントを書くためのヒント
  • Reactはラジオコンポーネントのサンプルコードを実装します
  • Andrew Ng の機械学習演習: SVM サポートベクターマシン

<<:  Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

>>:  Linux で iostat コマンドを使用するチュートリアル

推薦する

HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明

まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...

JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します

オブジェクトがメソッドを呼び出す順序:インスタンス内にメソッドが存在しない場合は、インスタンス オブ...

Docker コンテナ入門から夢中になるまで(推奨)

1. Docker とは何ですか?仮想マシンについては誰もが知っています。Windows に Li...

MySQL で複数のテーブルにビューを作成する方法

MySQLでは、2つ以上のベーステーブルにビューを作成します。学生テーブルとstu_infoテーブル...

Centos7.4 環境に lamp-php7.0 をインストールするチュートリアル

この記事では、Centos7.4 環境に lamp-php7.0 をインストールする方法について説明...

DockerコンテナでArthasを使用するための詳細な手順

Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...

JavaScriptはスタック構造の詳細なプロセスを実装する

目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...

ElementUIはel-formフォームリセット機能ボタンを実装します

目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...

ウェブサイト標準の検証方法を通じてFlashページを共有する方法

1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...

Linux sftp コマンドの使用法の概要

sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...

LinuxシステムでのSystemC環境設定方法

以下はcentos7での設定方法ですsystemc ソース パッケージをダウンロード: System...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

テーブルのネストと境界の結合の問題に対する解決策

【質問】外側のテーブルと内側のテーブルがネストされていて、内側のテーブルと外側のテーブルの両方に境界...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...