React の条件付きレンダリング: UI 要素を動的にレンダリングする

React での条件付きレンダリング: 条件に基づいた UI のレンダリング

React の条件付きレンダリングとは、特定の条件や状態に基づいてさまざまな UI 要素をレンダリングする手法を指します。 React は、アプリケーションの状態やプロパティに応じてコンポーネントや要素を条件付きでレンダリングするいくつかの方法を提供します。

---

1.条件付きレンダリングとは何ですか?

条件付きレンダリングは、さまざまなコンポーネントまたは要素が特定の条件に基づいてレンダリングされる概念です。 React では、これは通常、JSX 内で if、ternary、または && などの JavaScript 演算子 を使用して、何を表示するかを決定することによって実現されます。

条件付きレンダリングを使用する理由

• ユーザーの操作や状態の変化に基づいて、さまざまな UI 要素を表示します。
• 読み込み状態、エラー メッセージ、空の状態の表示などのエッジ ケースを処理するため。
• 異なるレイアウトまたはコンポーネントを動的に切り替えるため。

---

2.基本的な条件付きレンダリング手法

a. if/else ステートメントの使用

if または else ステートメントを使用する従来のアプローチは、JSX を返す前に使用できます。これは、複数の条件をチェックする必要がある場合に特に便利です。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

b.三項演算子の使用

三項演算子は、条件付きレンダリングを実行する簡単な方法です。条件が true の場合は 1 つの要素を表示し、条件が false の場合は別の要素を表示する場合に便利です。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

c.論理 && 演算子の使用

&& 演算子は、条件が true の場合に要素をレンダリングする短絡演算子です。このアプローチは、else 分岐を使用せずに条件付きで何かをレンダリングする必要がある場合にのみ役立ちます。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <button onClick={() => setIsLoggedIn(true)}>Login</button>}
    </>
  );
};

---

3.関数を使用した条件付きレンダリング

特にチェックする条件が複数ある場合、関数を使用して条件付きレンダリングをより明確に処理することもできます。

import React, { useState } from "react";

const MyComponent = () => {
  const [status, setStatus] = useState("loading");

  const renderContent = () => {
    if (status === "loading") {
      return <p>Loading...</p>;
    } else if (status === "error") {
      return <p>Error occurred!</p>;
    } else {
      return <p>Data loaded successfully!</p>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setStatus("error")}>Simulate Error</button>
      <button onClick={() => setStatus("success")}>Simulate Success</button>
    </div>
  );
};

---

4. React コンポーネントを使用した条件付きレンダリング

場合によっては、特定の条件に基づいてコンポーネント全体をレンダリングしたい場合があります。

import React, { useState } from "react";

const Welcome = () => <h1>Welcome back!</h1>;
const Login = () => <button>Login</button>;

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return isLoggedIn ? <Welcome /> : <Login />;
};

---

5.配列マッピングに基づく条件付きレンダリング

項目のリストをレンダリングしている場合、条件付きレンダリングを使用して、リスト内の特定の要素を選択的にレンダリングできます。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

---

6. API 呼び出しの useEffect を使用した条件付きレンダリング

多くの場合、API 呼び出しまたは非同期データの取得の結果に基づいて要素を条件付きでレンダリングします。これは、useEffect の状態と副作用を使用して実行できます。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

---

7.条件付きレンダリングのベスト プラクティス

• シンプルにしてください: JSX の読み取りや保守が困難になる、深くネストされた状態を避けてください。
• ヘルパー関数を使用する: 複数の条件がある場合、多くの場合、ヘルパー関数を使用して UI のさまざまな部分をレンダリングする方が簡単です。
• 状態とプロパティを考慮する: 条件付きレンダリングは、多くの場合、コンポーネントの状態またはプロパティに依存します。読み込み状態、空のデータ、エラーなどの特殊なケースを必ず処理してください。

---

8.結論

条件付きレンダリングは、状態またはプロパティに基づいてさまざまな UI 要素を表示できるようにする React の基本的な概念です。 if、三項演算子、&& 演算子、さらには関数などのテクニックを使用することで、コンポーネントがレンダリングする内容を動的に調整できます。適切な条件付きレンダリングは、アプリの状態やユーザー インタラクションに基づいて適切なコンテンツを表示することにより、ユーザー エクスペリエンスを向上させるのに役立ちます。

以上がReact の条件付きレンダリング: UI 要素を動的にレンダリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。