web-dev-qa-db-fra.com

opérateur ternaire en jsx pour inclure html avec react

J'utilise Réagir et j'essaie d'afficher ce message d'erreur si this.state.message === 'failed'. Mais je ne sais vraiment pas pourquoi cette opération ternaire ne fonctionne pas. Qu'est-ce que je fais mal ici?

render() {
...
<div className="row">
return (this.state.message === 'failed') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>

Pour le moment, il affiche simplement return (this.state.message === 'failed') ? ( => dans le code HTML

javascriptreactjsjsx
26
Modelesq

J'aime actuellement formater mes ternaires comme ceci en réaction:

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

Vous avez raison de dire que les IIFE peuvent être utilisés dans une déclaration de rendu ainsi que dans des expressions ternaires. L'utilisation d'une instruction if .. else normale est valide, mais l'instruction return de la fonction render ne peut contenir que des expressions, vous devez donc les faire ailleurs.

55
Nathan

La syntaxe pour ternary est condition ? if : else. Pour plus de sécurité, vous pouvez toujours envelopper la déclaration ternaire entière entre parenthèses. Les éléments JSX sont également entourés de parenthèses. La grosse flèche d'une fonction de flèche est toujours précédée de deux parenthèses (pour les arguments) - mais vous n'avez besoin d'aucune fonction ici. Donc, étant donné tout cela, il y a quelques erreurs de syntaxe dans votre code. Voici une solution de travail:

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Edit: si cela se trouve dans un autre balisage, vous n'avez pas besoin d'appeler de nouveau le rendu. Vous pouvez simplement utiliser des accolades pour l'interpolation.

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}
5
Matis Lepik

Vous devriez essayer ceci:

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}
2
Elod Szopos

Compte tenu des réponses ci-dessus, vous pouvez également renvoyer directement une expression ternaire de return() dans votre render() comme ceci

return condition? this.function1(): this.function2();

et dans function1 () et function2 (), vous pouvez retourner vos vues.

1
Aayushi

Pour utiliser à nouveau des crochets d’utilisation ternaires variables

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}
1
Nikolay Podolnyy

La réponse acceptée par @Nathan et d'autres réponses similaires sont correctes. Mais il convient de noter que le résultat pour ? et le résultat pour : doivent chacun être un seul élément ou être enveloppés dans un seul élément (ou le résultat peut être null | undefined, l'un ou l'autre qualifiant cet élément). Dans l'exemple ci-dessous, le résultat pour ? fonctionnera mais le résultat pour : échouera ....

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)
0
Kenigmatic