Ternary operator stylu z React Js Es 6

Question

Próbuję dodać następujący potrójny operator, aby pokazać mój przycisk, jeśli jestem zalogowany i jeśli nie mam tego ukryć. Poniższe informacje wciąż powodują błąd.

<img src={this.state.photo} alt="" style="{isLoggedIn ? 'display:' : 'display:none'}" /> 

Answer 1

To, co należy podać atrybutowi stylu, powinno być obiektem. Ponieważ piszemy kod js w jsx między nawiasy klamrowe, wstawimy tam obiekt.

Pamiętaj, musisz camelCase wszystkie rekwizyty css. (Font-size ==> fontSize)

<img 
    src={this.state.photo} 
    alt="" 
    style={ isLoggedIn ? { display:'block'} : {display : 'none'} } 
/> 

lub

<img 
    src={this.state.photo} 
    alt="" 
    style={ { display: isLoggedIn ? 'block' : 'none' } } 
/> 

wolałbym drugi.

Answer 2

style={isLoggedIn ? 'display:block' : 'display:none'} 

Usuń quotemarks - to powinno działać następnie (zakładając isLoggedIn jest logiczną-owski).