opérateur ternaire dans jsx pour inclure html avec react

j'utilise react et j'essaie d'afficher ce message d'erreur si this.state.message === 'failed'. Mais je ne sais pas vraiment pourquoi cette opération ternaire ne fonctionne pas. Ce que je fais mal?

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

en ce moment c'est juste afficher return (this.state.message === 'failed') ? ( => dans le html

24
demandé sur Modelesq 2016-06-28 22:24:17
la source

6 ответов

actuellement, je voudrais formater mon ternaires comme cela à réagir:

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 que IIFEs peut être utilisé dans une instruction de rendu aussi bien que dans des expressions ternaires. En utilisant une normale if .. else déclaration est valide, mais le render l'instruction return de la fonction ne peut contenir que des expressions de sorte que vous auriez à faire celles ailleurs..

50
répondu Nathan 2016-06-29 09:46:33
la source

la syntaxe pour ternary est condition ? if : else. Pour être sûr, vous pouvez toujours envelopper la totalité de la déclaration ternaire entre parenthèses. Les éléments JSX sont également entre parenthèses. La flèche fat dans une fonction de flèche est toujours précédée de deux parenthèses (pour les arguments) - mais vous n'avez pas besoin de fonctions ici de toute façon. Alors avec tout ça, il y a quelques erreurs de syntaxe dans votre code. Voici une solution qui fonctionne:

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

Edit: si c'est dans un autre markup, alors vous n'avez pas besoin à l'appel de nouveau 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
répondu Matis Lepik 2016-06-28 22:44:09
la source

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
répondu Elod Szopos 2016-06-28 22:38:26
la source

Pour l'utilisation de la variable à l'intérieur d'ternaire utiliser des crochets

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}
1
répondu Nikolay Podolnyy 2017-07-23 12:28:54
la source

étant donné les réponses ci-dessus, vous pouvez aussi retourner directement une expression ternaire de return() dans votre render() comme ceci

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

et à l'intérieur de function1() et function2() vous pouvez retourner vos vues.

1
répondu Aayushi 2018-02-23 09:35:56
la source

la réponse acceptée par @Nathan et d'autres réponses similaires sont correctes. Mais il est intéressant de noter que le résultat de ? et le résultat de : doit être un élément unique ou enveloppé dans un seul élément (ou le résultat peut être null | undefined, l'un ou l'autre constituant un seul élément). Dans l'exemple ci-dessous, le résultat de ? fonctionne, mais le résultat de : é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
répondu Kenigmatic 2017-11-29 08:48:16
la source

Autres questions sur