React の条件分岐

React では、JavaScript の条件文を使用して、コンポーネントや要素を動的にレンダリングできます。

以下は、React で条件付きレンダリングを処理するためのいくつかの一般的な方法です。

1. if 文を使用する

render メソッドまたは関数コンポーネントの戻り値内で if 文を使用して、レンダリングする内容を決定します。

実例

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;

    if (isLoggedIn) {
      content = <h1>Welcome back!</h1>;
    } else {
      content = <h1>Please sign up.</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

2. 三項演算子を使用する

JSX では、三項演算子を使用して簡潔な条件付きレンダリングを行うことができます。

実例

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

3. 論理積 (&&) 演算子を使用する

JSX では、論理積演算子を使用して条件付きレンダリングを行うことができます。条件が true の場合、後続の要素がレンダリングされます。

実例

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign up.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

4. switch 文を使用する

複数の条件を処理する必要がある場合は、render メソッド内で switch 文を使用できます。

実例

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const userRole = this.props.userRole;
    let content;

    switch (userRole) {
      case 'admin':
        content = <h1>Welcome, Admin!</h1>;
        break;
      case 'user':
        content = <h1>Welcome, User!</h1>;
        break;
      case 'guest':
        content = <h1>Welcome, Guest!</h1>;
        break;
      default:
        content = <h1>Who are you?</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />);

まとめ

  • if文：適していますrenderメソッドまたは関数コンポーネントの戻り値内で使用して、レンダリングする内容を決定します。
  • 三項演算子：JSX 内で簡潔な条件付きレンダリングを行うのに適しています。
  • 論理積 (&&) 演算子：JSX 内での条件付きレンダリングに適しています。条件がtrueの場合、要素をレンダリングします。
  • switch文：複数の条件を処理し、異なる内容をレンダリングするのに適しています。
その他の拡張