Réagir si/sinon dans JSX

-2

Je récupère des données JSON à partir d'une API, puis j'ai besoin de les afficher dans un composant de réaction. J'ai besoin d'utiliser les conditions if/else. Par ex. La durée renvoyée par les données JSON peut s'avérer être 0 ou ne pas être définie du tout, dans ce cas, je dois éviter de l'afficher à l'écran. J'ai donc besoin d'un conditionnement if/else à l'intérieur de la classe row et d'afficher les données de durée uniquement si elle est fournie par l'API, comment puis-je y parvenir? J'ai lu que JSX ne supporte pas if/else, quelle est l'alternative dans ce cas?Réagir si/sinon dans JSX

 <div className="row"> 
     //if condition needs to go here 
     <div className="__section--left">Duration</div> 
     <div className="__section--right border"> 
      {item.durationHours} Hours 
      {item.durationMinutes} Minutes 
     </div> 
     </div>

Source

2017-08-17 Manav Saxena

Copie possible de la [syntaxe JSX de reactjs pour IF autre] (https://stackoverflow.com/questions/41089394/reactjs-jsx-syntax-for-if-if-else) –

cochez la case [** DOC pour Rendu conditionnel * *] (https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator) –

cochez aussi ceci: [Est-il possible d'utiliser if ... else ... instruction dans la fonction de rendu de réaction?] (https://stackoverflow.com/questions/40477245/is-it-possible-to-use-if-else-statement-in-react-render-function) –

Vous pouvez utiliser l'expression ternaire condition ? ifTrue : ifFalse

il en sera ainsi quelque chose comme ça

<div className="row"> 
    //if condition needs to go here 
    { this.state.something === 'something' ? 
    <div className="__section--left">Duration</div> 
    <div className="__section--right border"> 
    {item.durationHours} Hours 
    {item.durationMinutes} Minutes 
    </div> 
    : null } 
</div>

Dans le code ci-dessus, si la condition vrai que vous retournez certains composants et si elle est fausse, vous revenez rien.

Source

2017-08-17 07:41:04

Réagir si/sinon dans JSX

Répondre

Questions connexes