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
6 réponses
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..
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>
);
}
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>
);
}
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>
)
}
é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.
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>
)
}
)