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 コマンドを使用するチュートリアル

推薦する

要素複数フォーム検証の実装

プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...

vue3 再帰コンポーネントカプセル化の全プロセス記録

目次序文1. 再帰コンポーネント2. 右クリックメニューコンポーネント要約する序文今日、プロジェクト...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策

1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

HTML ウェブページの基本コンポーネントの概要

<br />Web ページ上の情報は主にテキストベースです。 Web ページでは、フォン...

Linux で unzip コマンドを使用して複数のファイルを解凍する方法

Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...

JavaScript - Vue でのスロットの使用: スロット

目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...

クールなバーコードエフェクトの作り方を教えます

声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...

テキストエリアの disabled 属性と readonly 属性の具体的な使用法

障害者の定義と使用法disabled 属性はブール属性です。 disabled 属性は、テキスト領域...

MySQL 8.0.18 のインストールと設定のグラフィックチュートリアル

学習目標: Windowsシステムを使用してMySQLデータベースをインストールする方法を学びます。...

アクセス速度を上げるためにウェブサイトを最適化する方法の更新

最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...