Qual è il modo in cui React.js gestisce la visibilità = nascosta?

Question

React non support l'attributo visibilità per gli elementi.

Quindi, se voglio mostrare o nascondere un elemento sulla pagina, ma farlo occupare spazio quando nascosto, in modo che il layout non cambi, come faccio a fare qualcosa di simile?

<i className="fa fa-trash" visibility={this.state.showButton ? "visible": "hidden"} /> 

Answer 1

È possibile utilizzare una classe CSS per questo e modificare dinamicmente il nome classe. Per esempio:

<i className={this.state.showButton ? "fa fa-trash" : "fa fa-trash hidden"} />

Answer 2

È possibile utilizzare i CSS per questo.

<i className="fa fa-trash" style={{visibility: this.state.showButton ? 'visible' : 'hidden' }} /> 

Per saperne di più su inline styles in React

Answer 3

Questo è un CSS-attributo in modo da poter utilizzare in linea stili:

... 
var visibilityState = this.state.showButton ? "visible" : "hidden"; 
return (
    <i className="fa fa-trash" style={{visibility: visibilityState}}/> 
); 
... 

Answer 4

Mentre la risposta accettata funziona perfettamente, voglio parlare del classnames NPM package come un modo alternativo di implementarlo in un modo più DRY-friendly. Con questo pacchetto, non c'è bisogno di copiare le altre classi, statiche tra due stringhe:

<i className={classNames("fa", "fa-trash", {"hidden": !this.state.showButton})} />