Ternaires ou && dans JSX

Il y a toujours une question qui se pose dans l'esprit des développeurs: opter pour les ternaires ou les && logiques. Je préfère toujours le && logique aux ternaires juste pour gérer la condition de vérité. J'écrivais en suivant le code React il y a quelques jours:

  import React de "react";

const TodoList = ({todos}) => {
  revenir (
    <>
      
 {todos.length && todos.map (todo => 
 {todo.name} 
)} 
    
  );
};

exporter TodoList par défaut;

Quel est le problème avec ce code? Ah! Je ne vois rien de mal avec ce code. Tout fonctionne comme prévu et impression de la sortie suivante:

Attendez une minute! Que se passera-t-il avec le code ci-dessus si les valeurs de todos sont []. Ce sera la sortie:

N'est-ce pas la sortie laide! Il a rendu 0. Pourquoi en est-il ainsi? Il y a quelques observations sur la façon dont JavaScript évalue les && logiques.

Evaluating Logical &&

En JavaScript, lorsque nous évaluons des valeurs avec && logiques. Il sautera dans le côté droit de && seulement si la première condition est la vérité, sinon il devient faux.

 // Vérité
console.log (1 && true); // vrai, côté droit évalué.
console.log (1 && false); // faux, côté droit évalué.
console.log ('1' && true) // true, côté droit évalué.
console.log ('1' && false) // false, côté droit évalué.

//Faux
console.log (0 && true); // 0, côté droit jamais évalué.
console.log (0 && false) // 0, côté droit jamais évalué.
console.log (faux && vrai); // faux, côté droit jamais évalué.
console.log (faux && faux); // faux, côté droit jamais évalué.
console.log (null && true); // null, côté droit jamais évalué.
console.log (null && false); // null, côté droit jamais évalué.

Ok. Nous avons compris le problème avec le && logique, mais qu'en est-il de sa solution? Voici quelques solutions.

Solution:

Voici quelques solutions pour résoudre le problème causé par les && logiques dans JSX:

1. Utilisez les opérateurs ternaires (?:)
2. ] Conversion de type booléen (!!)
3. Modification des conditions.

Utiliser les opérateurs ternaires (?:)

En utilisant les opérateurs ternaires, nous pouvons utiliser l'instruction else pour gérer une fausse condition. Nous pouvons réécrire l'extrait de code ci-dessus comme ceci:

 import React from "react";

const TodoList = ({todos}) => {
  revenir (
    <>
      
 {todos.length? todos.map (todo => 
 {todo.name} 
): null} 
    
  );
};

exporter TodoList par défaut;

Voici la sortie que nous recevons:

Simple. Solution assez juste. Maintenant, nous n'obtenons pas 0 contrairement à la logique &&. Mais j'adore utiliser le && logique. N'y a-t-il pas un moyen de le gérer en utilisant les && logiques? . Voici comment nous pouvons l'écrire:

 import React de "react";

const TodoList = ({todos}) => {
  revenir (
    <>
      
 {!! todos.length && todos.map (todo => 
 {todo.name} 
)} 
    
  );
};

exporter TodoList par défaut;

Ce que nous faisons dans le code ci-dessus est de convertir le type de todos.length dont la valeur est 0 en booléen faux et la condition de la main droite n'est jamais exécutée. Le code ci-dessus affichera la sortie suivante:

Modification des conditions

Nous pouvons également modifier la condition de longueur en ajoutant le plus grand que 0 de sorte qu'il ne montrera que si todos est présent. Voici comment nous pouvons l'écrire:

 import React de "react";

const TodoList = ({todos}) => {
  revenir (
    <>
      
 {todos.length> 0 && todos.map (todo => 
 {todo.name} 
)} 
    
  );
};

exporter TodoList par défaut;

Cela donnera le même résultat et 0 ne sera pas rendu.

C'est une solution assez simple pour gérer les problèmes causés par les && logiques. Bon codage!

À propos de l'auteur

Akhilesh Ayyar est consultant technique principal chez Perficient Inc. Il travaille actuellement en tant que développeur front-end avec l'équipe CAT. Il est un passionné de JavaScript et aime partager et entendre des expériences liées au développement Front-End.

Plus de cet auteur