ternären Operator in Jsx, um HTML mit reagieren

Question

Ich benutze reagieren und ich versuche diese Fehlermeldung anzuzeigen, wenn this.state.message === 'failed'. Aber ich bin mir wirklich nicht sicher, warum diese ternäre Operation nicht funktioniert. Was mache ich hier falsch?

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

Gerade jetzt seine Anzeige nur return (this.state.message === 'failed') ? (=> im html

Answer 1

ich zur Zeit mag dies mein Ternäre wie in formatieren reagieren:

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> 
); 
} 

Sie sind richtig, dass IIFEs innerhalb einer Aussage machen verwendet werden können, als auch ternäre Ausdrücke. eine normale if .. else Anweisung ist gültig, aber die Return-Anweisung der render Funktion kann nur Ausdrücke enthalten, so dass Sie die an anderer Stelle tun müßten ..

Answer 2

du versuchen sollte:

für ternäre

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> 
    ); 
} 

Answer 3

Die Syntax ist condition ? if : else. Um sicherzugehen, können Sie die gesamte ternäre Anweisung immer in Klammern einschließen. JSX-Elemente sind ebenfalls in Klammern eingeschlossen. Dem Fettpfeil in einer Pfeilfunktion sind immer zwei Klammern (für die Argumente) vorangestellt - aber Sie brauchen hier sowieso keine Funktionen. Bei all dem gibt es ein paar Syntaxfehler in Ihrem Code. Hier ist eine Arbeitslösung:

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

Edit: wenn diese in anderer Markup ist, dann müssen Sie nicht noch einmal machen rufen. Sie können einfach geschweifte Klammern für die Interpolation verwenden.

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

Answer 4

Für Variable in ternärer Verwendung Klammern wieder

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

Answer 5

Die akzeptierte Antwort mit von @Nathan und andere ähnliche Antworten sind korrekt. Es muss jedoch darauf hingewiesen werden, dass das Ergebnis für ? und das Ergebnis für : jeweils ein einzelnes Element oder ein einzelnes Element sein muss (oder das Ergebnis kann null | undefined lauten, von denen sich beide als einzelnes Element qualifizieren). Im Beispiel unten wird das Ergebnis für ? arbeiten, aber das Ergebnis für : fehl ....

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> 
    ) 
    } 
) 

Answer 6

die oben genannten Antworten gegeben, können Sie auch einen ternären Ausdruck von return() in Ihrem render() wie diese direkt zurückkehren

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

und in Funktion1() und Funktion2() können Sie Ihre Ansichten zurückgeben.