反応で条件付きレンダリングを実装する方法.

こんにちは、みんな、
この記事では、反応要素を条件付きでレンダリングする方法を理解しましょう.

React を使用すると、さまざまな条件に基づいて UI マークアップをレンダリングできます.反応で条件付きレンダリングを実装する方法は他にもあるかもしれませんが、最も一般的に使用されるいくつかの点についてのみ説明します.

条件付きレンダリングを明確に理解するために、簡単な例を取り上げます.アプリにログインとログアウトの 2 つのボタンがあるとします.
私たちの要件は、ログインしたときに Logout ボタンが表示され、ログアウトしたときに Login ボタンが表示されるようなものです.

では、この問題をどのように解決しますか.

一つ一つ見ていきましょう.

if else ステートメントを使用して.

if else ブロックの実行中に、条件が満たされた場合、if ブロック内のコードが実行されます.そうでない場合、else ブロック内のコードが実行されます.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  const displayButton = () => {
    if (isLoggedin) {
      return <button>Logout</button>;
    } else {
      return <button>Login</button>;
    }
  };
  return (
    <div>
      <h1>Conditional rendering</h1>
      {displayButton()}
    </div>
  );
};

jsx で JavaScript 式を記述できることがわかっているため、どの条件が true であるかに基づいて button 要素を返し、その特定の返された要素のみがレンダリングされる 1 つの関数を記述しました.

要素変数を使用する.

このアプローチでは、jsx 式で javascript 関数を使用する代わりに、jsx 要素変数を使用します. jsx 要素の値は、前のアプローチと同じように条件に基づいて決定されます.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  let Button;

  if (isLoggedin) {
    Button = <button>Logout</button>;
  } else {
    Button = <button>Login</button>;
  }

  return (
    <div>
      <h1>Conditional rendering</h1>
      {Button}
    </div>
  );
};

上記の例では、Button 変数を jsx 要素として使用しており、その値は isLoggedin 状態に基づいて割り当てられています.

三項演算子を使用する

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin ? <button>Logout</button> : 
      <button>Login</button>}
    </div>
  );
};

上記の例では、コンポーネント関数で条件を使用する代わりに、jsx 式自体に条件を適用しています.条件を適用するために、三項演算子を使用しています.三項演算子は 3 つのオペランドを使用することがわかっているため、1 つ目は条件自体、2 つ目は条件が満たされた場合に返される結果、3 つ目は条件が満たされない場合に返されるものです. .

論理 && 演算子を使用する.

このアプローチも前のアプローチと少し似ていますが、このアプローチでは三項演算子の代わりに論理 && 演算子を使用します.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin && <button>Logout</button>}
      {!isLoggedin && <button>Login</button>}
    </div>
  );
};

上記の例では、button 要素をレンダリングするための 2 つの jsx 式があり、isLoggedin 状態に基づいて適切な jsx 式が評価されます.

より多くのアプローチがあるかもしれませんが、上記のアプローチが一般的に使用されます.

この投稿がお役に立てば幸いです.