DOT's Wiki

ユーザ用ツール

サイト用ツール

トレース:
programming:frontend:typescript:react:login:contextを使ったシンプルなログイン機能

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		前のリビジョン
programming:frontend:typescript:react:login:contextを使ったシンプルなログイン機能 [2022/06/29 05:46] – 作成 dotprogramming:frontend:typescript:react:login:contextを使ったシンプルなログイン機能 [2022/06/29 08:05] (現在) – dot
行 1: 行 1:
- 
 create-react-app が生成した App.tsx に useContext を使って Login 機能を実装するための概念を説明する雑なソースコード。 create-react-app が生成した App.tsx に useContext を使って Login 機能を実装するための概念を説明する雑なソースコード。
  
 App.tsx App.tsx
  
-<coce JavaScript>+<code JavaScript>
 import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
 import './App.css'; import './App.css';
行 22: 行 21:
       setUser({account: "miyazato"});       setUser({account: "miyazato"});
     }     }
 +  };
 +  const logout = () => {
 +    setUser(null);
   };   };
  
行 37: 行 39:
           </label>           </label>
           <button onClick={login}>Login</button>           <button onClick={login}>Login</button>
 +          <button onClick={logout}>Logout</button>
           <Content/>           <Content/>
         </UserContext.Provider>         </UserContext.Provider>
行 48: 行 51:
   return (   return (
     <div>     <div>
 +      { 
 +        user ?
       <span>LoginUser: {user?.account}</span>       <span>LoginUser: {user?.account}</span>
 +      :
 +      <span>LoginUser: (Not Logged In)</span>
 +      }
     </div>     </div>
   );   );
programming/frontend/typescript/react/login/contextを使ったシンプルなログイン機能.1656481562.txt.gz · 最終更新: 2022/06/29 05:46 by dot