Déclaration if en React

Rana Hasnain Khan 15 février 2024

React React Statement

Nous présenterons l’instruction if dans react et comment l’utiliser dans les fonctions de réaction render.

Déclaration `if` en React

Lorsque nous construisons une application de réaction, nous pouvons souvent avoir besoin d’afficher ou de masquer du contenu en fonction d’une certaine condition. Le rendu conditionnel dans react fonctionne de la même manière que les conditions fonctionnent dans JavaScript.

Premièrement, nous allons créer un nouveau fichier nommé UserGreetings.Js ; dans le fichier, créons un composant de classe. Supprimons maintenant named export.

Dans JSX, nous renverrons Welcome User!. Notre fichier UserGreetings.Js ressemblera à celui ci-dessous.

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

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

export default UserGreetings;

Nous allons maintenant importer UserGreetings dans le fichier App.js.

# react
import UserGreetings from "./UserGreetings"

Nous allons maintenant inclure le composant UserGreetings.

# react
<UserGreetings />

Ainsi, notre code dans App.js ressemblera à ci-dessous.

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

Production :

React si l’affichage du composant UserGreetings de l’instruction

Maintenant, revenons au fichier UserGreetings.js et apportons des modifications en ajoutant un constructeur et dans le constructeur, appelons super, puis définissons le state. Créons maintenant une propriété d’état appelée LoggedIn et initialisons-la à false.

Maintenant dans le JSX, ajoutons un autre message qui dit Welcome Guest!. Notre code dans UserGreetings.js ressemblera à ci-dessous.

# 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;

Créons maintenant une instruction if. Si LoggedIn est true, il devrait afficher Welcome User! et si LoggedIn est false, il devrait afficher Welcome Guest!.

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

et condition else si LoggedIn est faux.

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

Ainsi, notre fichier UserGreetings.js ressemblera à celui ci-dessous.

# 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;

Production :

React if l’instruction - si LoggedIn est faux

Donc, comme vous pouvez le voir dans le résultat, cela fonctionne bien. Il a renvoyé Welcome Guest car LoggedIn est défini sur false.

Maintenant, réglons-le sur 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;

Production :

React si l’instruction - si LoggedIn est vrai

Auteur: 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.