Operator potrójny w jsx do włączenia html z reakcją

Question

Używam reagować i próbuję wyświetlić ten komunikat o błędzie, jeśli this.state.message === 'failed'. Ale naprawdę nie jestem pewien, dlaczego ta trójczłonowa operacja nie działa. Co ja tu robię źle?

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

Teraz jej tylko wyświetlanie return (this.state.message === 'failed') ? (=> w html

Answer 1

Obecnie lubią formatować moje ternaries tak w reakcji:

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

Masz rację, że IIFEs może być używany w oświadczeniu uczynić, jak również wyrażenia trójskładnikowych. Korzystanie z normalnego if .. else oświadczenie jest ważne, ale return na render funkcyjnego może zawierać tylko wyrażenia tak trzeba by zrobić te, gdzie indziej ..

Answer 2

Powinieneś spróbować tego:

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

Składnia trójskładnikowego jest condition ? if : else. Aby być bezpiecznym, możesz zawsze owinąć cały tekst potrójny w nawias. Elementy JSX są również zawijane w nawiasy. Gruba strzałka w funkcji strzałki zawsze poprzedza dwa nawiasy (dla argumentów) - ale i tak nie potrzebujesz tu żadnych funkcji. Biorąc to wszystko pod uwagę, w Twoim kodzie występuje kilka błędów składniowych. Oto działające rozwiązanie:

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

Edytuj: jeśli znajduje się wewnątrz innych znaczników, nie musisz ponownie wywoływać renderowania. Możesz użyć nawiasów klamrowych do interpolacji.

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

Answer 4

Do wykorzystania zmiennej w nawiasach użytku trójskładnikowych ponownie

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

Answer 5

Zaakceptowanych odpowiedź przez @ Natana i inne podobne odpowiedzi są poprawne. Warto jednak zauważyć, że wynik dla ? i wynik dla muszą być pojedynczym elementem lub zawinięte w jeden element (lub wynik może być null | undefined, z których jeden kwalifikuje się jako pojedynczy element). W poniższym przykładzie, wynik dla ? będzie działać, ale wynik do : zawiedzie ....

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

Biorąc powyższe odpowiedzi, można również bezpośrednio powrócić potrójny wyraz z return() w swojej render() tak

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

i wewnątrz funkcji1() i funkcji2() możesz przywrócić swoje widoki.