web-dev-qa-db-fra.com

Comment faire une instruction if else imbriquée dans reactjs JSX?

Je voulais savoir s'il est possible de faire une imbrication si sinon si dans reactjsjsx?

J'ai essayé de différentes manières et je suis incapable de le faire fonctionner.

Je cherche

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main 
}

J'ai essayé cela mais je n'arrive pas à le rendre. J'ai essayé de différentes manières. Cela casse toujours une fois que j'ajoute le si imbriqué.

  {
          this.state.loadingPage ?
            (<div>loading page</div>) :
            (<div>
               this.otherCondition && <div>title</div>
               <div>body</div>
            </div>)
        }

Mettre à jour

J'ai fini par choisir la solution pour déplacer ceci à renderContent et appeler la fonction. Les deux réponses ont bien fonctionné. Je pense que je peux utiliser la solution en ligne s’il s’agit d’un simple rendu et d’un rendContenu pour des cas plus complexes.

Je vous remercie

javascriptreactjsecmascript-6jsx
20
ALM

Vous devez emballer votre titre et votre corps dans un conteneur. Cela pourrait être une div. Si vous utilisez un list à la place, vous aurez un élément de moins dans le dom.

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? <div key='0'>some title</div>
        : null
      ),
      <div key='1'>body</div>
    ]
}

Je vous conseillerais de ne pas imbriquer les déclarations ternaires car elles sont difficiles à lire. Parfois, il est plus élégant de "rentrer tôt" que d'utiliser un ternaire. En outre, vous pouvez utiliser isBool && component si vous ne voulez que la vraie partie du ternaire.

renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return [
    (this.state.someBoolean && <div key='0'>some title</div>),
    <div key='1'>body</div>
  ];
}

render() {
  return <div className="outer-wrapper">{ renderContent() }</div>;
}

Attention à la syntaxe someBoolean && "stuff": si, par erreur, someBoolean est défini sur 0 ou NaN, ce numéro sera restitué au DOM. Donc, si le "booléen" peut être un falsy Number , il est préférable d'utiliser (someBoolean ? "stuff" : null).

32
Neal Ehardt

Au lieu d'imbriquer des opérateurs ternaires comme cela est souvent suggéré ou de créer une fonction distincte qui ne sera réutilisée nulle part ailleurs, vous pouvez simplement appeler une expression inline:

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>
10
dehumanizer

Votre code dans l'alternative n'est pas une expression JavaScript/JSX valide:

(
  this.state.someBoolean ?
  (<div>some title</div>):(<div>some other title</div>)
  <div>body</div>
)

Permet de simplifier ceci pour

(
  true ? 42 : 21
  3
)

Cela jette l'erreur 

Uncaught SyntaxError: Nombre inattendu (…)

Vous ne pouvez pas simplement avoir deux expressions l'une à côté de l'autre.

Au lieu de cela, vous devez renvoyer une valeur unique à partir de la fausse branche de l'opérateur conditionnel. Vous pouvez le faire en le mettant simplement dans un autre élément JSX:

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
    <div>body</div>
  </div>
)

Si vous souhaitez afficher uniquement "body" lorsque "un autre titre" est affiché, vous devez déplacer <div>body</div> dans la fausse branche de l'opérateur conditionnel:

(
  this.state.someBoolean ?
    (<div>some title</div>) :
    (<div>
       <div>some other title</div>
       <div>body</div>
    </div>)
)

Ou peut-être que tu veux

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : null}
    <div>body</body>
  </div>
)
6
Felix Kling

Comme l’indique l’autre réponse, il existe différentes façons de créer une imbrication si elle réagit. Lequel utiliser dépend de la situation et des préférences.

À mon avis, pour une meilleure lisibilité du code, à cette occasion, il serait préférable de déplacer le contenu d’autre en fonction distincte:

renderContent() {
     return (
         <div>
             { this.otherCondition && <div>title</div> }
             <div>body</div>
         </div>
     );
}

render() {
    return (
        <div>
            { ... }
            {
                this.state.loadingPage ?
                    <div>loading page</div>
                    :
                    this.renderContent()
            }
            { ... }
        </div>
    )
}

Ou si c'est assez simple (au cas où aucun autre élément n'est rendu), je choisirais:

render() {
    if (this.state.loadingPage) {
        return (
            <div>loading page</div>
        )
    }
    return (
        <div>
            { this.otherCondition && <div>title</div> }
            <div>body</div>
        </div>
    );
}

Voici un article sur le rendu conditionnel dans React , veuillez donc le vérifier si vous souhaitez plus de détails sur ce sujet.

0
Nesha Zoric