[react]ガリサン3条件レンダリングチュートリアル

60644 ワード
テキストリンク

条件付きレンダリング


reactに必要な操作を実行するために、個別のパッケージ構成部品を作成できます.また、アプリケーションの状態に応じて一部のみをレンダリングすることもできます.主に、特定の条件に応じて表示する必要がある内容が異なる場合に使用されます.

ログインページの作成


簡単なログインページを作成しましょう.
最初の接続はログアウトされた(ログインされていない)状態です.
ユーザー名を受信できる「入力とログイン」ボタンが表示されます.
次に、ユーザー名を入力し、ログインボタンを押します.
Inputウィンドウの代わりに「ログイン成功!」皆さんにこの言葉を見せて、사용자 이름皆さんにお会いできて嬉しいです!みんなに見せられるように



1.構造


デフォルトのスクリーンの構造は、次のコードのように整理できます.
import React from "react";

const App = () => {
  return (
    <>
      <form>
        <input placeholder="이름을 입력해주세요" />
        <button>로그인</button>
        <p>Guest Greeting</p>
      </form>
    </>
  );
};

export default App;

2.入力を受け入れてステータスとして保存


これで、inputのコンテンツを受信してinputValueに保存できます.
console.ロゴを撮ってみて、内容がはっきりしているかどうかを確認することができます.
import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  return (
    <>
      <form>
        <input
            placeholder="이름을 입력하세요"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
        <button>로그인</button>
        <p>Guest Greeting</p>
      </form>
    </>
  );
};

export default App;
入力時に検証する必要がない場合は、useRef()も使用できます.しかし、useRef()はDOMを直接導入して操作するJSに近いので、本当の考え方ではありません.状況に応じて適切に使用しますが、できるだけuseState()を使用することをお勧めします.
  • SOPT 29 thWEB部分長金義珍の意見

    • 3.条件付きレンダリングsubmit機能の追加


    フォームが発行されると(クリックまたはボタン)、ボタンの内容は로그인から로그아웃に変更されます.このためには、現在ログインしているかどうかを確認するステータスが必要です.const [isLoggedIn, setIsLoggedIn] = useState(false); onSubmitを使用して、フォームの発行時に使用される関数を定義します.onSubmitが完了したら、isLogedInの状態をログインからログアウトに変更し、ログアウトからログインに変更します.

    3-1. ボタンラベルの内容の変更


    ボタンの内容をisLoggedInに変更する直感的なコードを次に示します.
    import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  let button;
  if (isLoggedIn) button = <button>로그아웃</button>;
  else button = <button>로그인</button>;

  return (
    <>
      <form>
        <input
          placeholder="이름을 입력하세요"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        {button}
        <p>Guest Greeting</p>
      </form>
    </>
  );
};

export default App;
    buttonという変数を作成し、buttonタグ全体を条件に置き換えます.ここで記述したif-else文の行内コードを以下に示します.
    const button = isLoggedIn ? <button>로그아웃</button> : <button>로그인</button>;
    上記のコードの構成は次のとおりです.
    const 변수명 = 조건(참/거짓) ? 조건이 참일 때 넣을 값 : 조건이 거짓일 때 넣을 값 ;
    html tagを使用して、条件に基づいて置き換える変数値を置き換えることができます.
    詳細ビューボタンラベルには重複項目が含まれています.isLogdInの状態に依存するのはタグ内の内容であり,タグ全体ではない.重複して作成されたコードを削除すると、次のようになります.
    const buttonText = isLoggedIn ? "로그아웃" : "로그인";
const button = <button>{buttonText}</button>;
    これは非常に簡単なコードで、不要な変数宣言がたくさんあるように見えます.メモリの無駄を減らすためにbutton Textをbutton変数に結合するコードは次のとおりです.
    const button = <button>{isLoggedIn ? "로그아웃" : "로그인"}</button>;
    同様の理由で、アプリケーション()の戻り文の{button}にコードを一度に記述できます.完全なコードは次のように記述できます.
    import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      <form>
        <input
          placeholder="이름을 입력하세요"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button>{isLoggedIn ? "로그아웃" : "로그인"}</button>
        <p>Guest Greeting</p>
      </form>
    </>
  );
};

export default App;
    これで、isLogdInのステータスを確認し、適切な値としてレンダリングできます.

    3-2. onSubmit接続


    isLogdInの状態は変化していないので、ボタンをクリックしても変化しません.Inputを入力してコミットする場合、isLogedInの状態を変更する必要があります.次のコードを作成します.ログアウト状態でコミットする場合、isLogedInはfalseからtrueに変更する必要があります.逆に、ボタンはtrueからfalseに変更する必要があります.
    import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleSubmit = (e) => {
    // onSubmit의 기본적으로 내장된 새로고침을 막기
    e.prevenDefault();
  	if (isLoggedIn) setIsLoggedIn(false);
    else setIsLoggedIn(true);
  };

  return (
    <>
      <form onSubmit={(e) => handleSubmit(e)}>
        <input
          placeholder="이름을 입력하세요"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button>{isLoggedIn ? "로그아웃" : "로그인"}</button>
        <p>Guest Greeting</p>
      </form>
    </>
  );
};

export default App;
    falseがtrueであることをもう一度考えると、trueがfalseである場合、互いに逆の状態になるのが特徴です.以下は、より簡潔なHandleSubmitです.
    import React, { useState } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleSubmit = (e) => {
    e.prevenDefault();
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <>
      <form onSubmit={(e) => handleSubmit(e)}>
        <input
          placeholder="이름을 입력하세요"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button>{isLoggedIn ? "로그아웃" : "로그인"}</button>
        <p>Guest Greeting</p>
      </form>
    </>
  );
};

export default App;

    4.inputウィンドウを隠す


    ログアウトされた状態では名前を入力する必要がありますが、ログイン状態では名前を非表示にしたほうがいいです.isLoggedInがfalseの場合はinput、trueの場合はinputではなくinputが表示されます.「ログイン成功!」表示されるコードは次のとおりです.
    import React, { useState, useEffect } from "react";
import UserGreeting from "./UserGreeting";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const greeting = isLoggedIn ? (
    <UserGreeting userName={inputValue} />
  ) : (
    <div>Guest Greeting</div>
  );
  const handleSubmit = (e) => {
    e.preventDefault();
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <>
      <form onSubmit={(e) => handleSubmit(e, !isLoggedIn)}>
        {!isLoggedIn ? (
          <input
            placeholder="이름을 입력하세요"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
        ) : (
          "로그인 성공!"
        )}
        <button>{isLoggedIn ? "로그아웃" : "로그인"}</button>
      </form>
      {greeting}
    </>
  );
};

export default App;

    5.inputの初期化


    システムが正常に動作しているが、ログイン後に再ログアウトすると、以前の値がまだ存在することがわかります.inputValue値をsetInputValue()に変更すればよいが、HandleSubmitでこのコードを記述すると、値は取得できない.
    const handleSubmit = (e) => {
  e.preventDefault();
  setIsLoggedIn(!isLoggedIn);
  setInputValue('');
};
    setStateは非同期関数なので、順番に実行されません.ログイン後、inputValueを初期化しますが、機能しません.isLogedInがuseEffectに変更された場合、setInputValueを初期化します.
    useEffect(() => {
  if (!isLoggedIn) setInputValue("");
}, [isLoggedIn]);

    6.[条件付きレンダリング]inputの内容の場合のみ挨拶


    これでinputの内容がなくても「ログイン成功」と出力されます.以下に、inputValueのコンテンツが存在する場合にのみ「ログイン成功」を出力するコードを示します.

    6-1. && 演算子

    {!isLoggedIn ? (
  <input
    placeholder="이름을 입력하세요"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    />
) : (
  <span>{inputValue && <span>로그인 성공!</span>}</span>
)}
    JavaScriptではtrue&&式は常に式として計算され、false&&式は常にfalseとして計算されるため、このコードは正常に動作します.したがって、条件がtrueの場合、次の要素が露出します.条件がfalseの場合、reactはスキップします.

    6-2. return null構成部品のレンダリングを防止


    UserGreetingによって受信されたprops userNameが空の場合は、return nullに入れて、ユーザGreeting要素自体のレンダリングを防止することもできます.
    // UserGreeting.js
import React from "react";

const UserGreeting = ({ userName }) => {
  if (!userName) return null;
  return <div>{userName}님 반갑습니다!</div>;
};

export default UserGreeting;

    tutorialフルコード

    // App.js
import React, { useState, useEffect } from "react";
import UserGreeting from "./UserGreeting";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const greeting = isLoggedIn ? (
    <UserGreeting userName={inputValue} />
  ) : (
    <div>Guest Greeting</div>
  );
  const handleSubmit = (e) => {
    e.preventDefault();
    setIsLoggedIn(!isLoggedIn);
  };

  useEffect(() => {
    if (!isLoggedIn) setInputValue("");
  }, [isLoggedIn]);

  return (
    <>
      <form onSubmit={(e) => handleSubmit(e, !isLoggedIn)}>
        {!isLoggedIn ? (
          <input
            placeholder="이름을 입력하세요"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
        ) : (
          <span>{inputValue && <span>로그인 성공!</span>}</span>
        )}
        <button>{isLoggedIn ? "로그아웃" : "로그인"}</button>
      </form>
      {greeting}
    </>
  );
};

export default App;
    // UserGreeting
import React from "react";

const UserGreeting = ({ userName }) => {
  if (!userName) return null;
  return <div>{userName}님 반갑습니다!</div>;
};

export default UserGreeting;
    ソース:React公式文書
    1.機械学習と深い学習
    linux環境で実際のipアドレスを取得