React で setInterval 関数を使用する例

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

1. setInterval関数

（１）定義

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

（２）例

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 をよろしくお願いいたします。

以下もご興味があるかもしれません: