If-Anweisung in React

Rana Hasnain Khan 15 Februar 2024

React React Statement

Wir werden die if-Anweisung in React einführen und wie man sie in den React render-Funktionen verwendet.

if-Anweisung in React

Wenn wir eine Reaktionsanwendung erstellen, müssen wir möglicherweise häufig Inhalte basierend auf einer bestimmten Bedingung anzeigen oder ausblenden. Das bedingte Rendering in React funktioniert genauso wie die Bedingungen in JavaScript.

Zuerst erstellen wir eine neue Datei namens UserGreetings.Js; Lassen Sie uns innerhalb der Datei eine Klassenkomponente erstellen. Entfernen wir nun den benannten Export.

In JSX geben wir Welcome User! zurück. Unsere Datei UserGreetings.Js sieht wie folgt aus.

# react
import React, {Component} from 'react';

class UserGreetings extends Component {
    render() {
        return (
            <div>
                Welcome User!
            </div>
        );
    }
}

export default UserGreetings;

Jetzt importieren wir UserGreetings in die Datei App.js.

# react
import UserGreetings from "./UserGreetings"

Jetzt werden wir die Komponente UserGreetings einbinden.

# react
<UserGreetings />

Unser Code in App.js sieht also wie folgt aus.

# react
import "./styles.css";
import UserGreetings from "./UserGreetings"
export default function App() {
  return (
    <div className="App">
      <UserGreetings />
    </div>
  );
}

Ausgabe:

React, wenn Anweisung UserGreetings Komponentenanzeige

Gehen wir nun zurück zur Datei UserGreetings.js und nehmen Änderungen vor, indem wir einen Konstruktor hinzufügen und innerhalb des Konstruktors super aufrufen und dann den state definieren. Lassen Sie uns nun eine Zustandseigenschaft namens LoggedIn erstellen und auf false initialisieren.

Lassen Sie uns nun im JSX eine weitere Nachricht hinzufügen, die besagt: Welcome Guest!. Unser Code in UserGreetings.js sieht wie folgt aus.

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: false
    };
  }

  render() {
    return (
      <div>
        <div>Welcome User!</div>
        <div>Welcome Guest!</div>
      </div>
    );
  }
}

export default UserGreetings;

Lassen Sie uns nun eine if-Anweisung erstellen. Wenn LoggedIn true ist, sollte es Welcome User! anzeigen. und wenn LoggedIn false ist, sollte es Welcome Guest! anzeigen.

# react
if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    }

und else-Bedingung, wenn LoggedIn falsch ist.

# react
else{
    return(
    <div>Welcome Guest!</div>
    )
}

Unsere Datei UserGreetings.js sieht also wie folgt aus.

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: false
    };
  }

  render() {
    if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    } 
    else{
      return(
      <div>Welcome Guest!</div>
      )
  }
  }
}

export default UserGreetings;

Ausgabe:

React Sie, wenn die Anweisung - wenn LoggedIn falsch ist

Also, wie Sie im Ergebnis sehen können, funktioniert es gut. Es hat Welcome Guest zurückgegeben, weil LoggedIn auf false gesetzt ist.

Jetzt setzen wir es auf true.

# react
import React, { Component } from "react";

class UserGreetings extends Component {
  constructor(props) {
    super(props);

    this.state = {
      LoggedIn: true
    };
  }

  render() {
    if(this.state.LoggedIn){
      return(
        <div>Welcome User!</div>
      )
    } 
    else{
      return(
      <div>Welcome Guest!</div>
      )
  }
  }
}

export default UserGreetings;

Ausgabe:

Reagiere wenn Anweisung - wenn LoggedIn wahr ist

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.