React Bedingtes Rendern

In React kannst du JavaScript-Bedingungsanweisungen verwenden, um Komponenten oder Elemente dynamisch zu rendern.

Im Folgenden finden Sie mehrere gängige Methoden für den Umgang mit bedingtem Rendering in React:

1. Verwendung von if-Anweisungen

Verwenden Sie if-Anweisungen in der render-Methode oder im Rückgabewert von Funktionskomponenten, um zu entscheiden, was gerendert wird.

Beispiel

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>Willkommen zurück!</h1>;
    } else {
      content = <h1>Bitte registrieren Sie sich.</h1>;
    }

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

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

2. Verwendung des ternären Operators

In JSX können Sie den ternären Operator für prägnantes bedingtes Rendering verwenden.

Beispiel

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

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

  return (
    <div>
      {isLoggedIn ? <h1>Willkommen zurück!</h1> : <h1>Bitte registrieren Sie sich.</h1>}
    </div>
  );
};

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

3. Verwendung des logischen UND-Operators (&&)

In JSX können Sie den logischen UND-Operator für bedingtes Rendern verwenden. Wenn die Bedingung wahr ist, wird das folgende Element gerendert.

Beispiel

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

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

  return (
    <div>
      {isLoggedIn && <h1>Willkommen zurück!</h1>}
      {!isLoggedIn && <h1>Bitte registrieren Sie sich.</h1>}
    </div>
  );
};

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

4. Verwendung von switch-Anweisungen

Wenn Sie mehrere Bedingungen behandeln müssen, können Sie eine switch-Anweisung in der render-Methode verwenden.

Beispiel

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>Willkommen, Admin!</h1>;
        break;
      case 'user':
        content = <h1>Willkommen, Benutzer!</h1>;
        break;
      case 'guest':
        content = <h1>Willkommen, Gast!</h1>;
        break;
      default:
        content = <h1>Wer sind Sie?</h1>;
    }

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

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

Zusammenfassung

  • ifAnweisung: geeignet für die Verwendung inrenderMethoden oder dem Rückgabewert von Funktionskomponenten, um den darzustellenden Inhalt zu bestimmen.
  • Ternärer Operator: geeignet für prägnantes bedingtes Rendering in JSX.
  • logisches UND (&&) Operator: geeignet für bedingtes Rendering in JSX. Wenn die Bedingungtruedann rendere das Element.
  • switchAnweisung: geeignet für die Behandlung mehrerer Bedingungen und das Rendern unterschiedlicher Inhalte.
Andere Erweiterungen