Wie kann React.js mit Sichtbarkeit = versteckt umgehen?

Question

reagiert nicht support das Sichtbarkeitsattribut für Elemente.

Also, wenn ich ein Element auf der Seite anzeigen oder ausblenden möchte, aber immer noch Platz, wenn ausgeblendet, damit das Layout nicht verschiebt, wie mache ich so etwas?

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

Answer 1

Sie können dafür eine CSS-Klasse verwenden und Ihren className dynamisch ändern. Zum Beispiel:

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

Answer 2

können Sie CSS für diese.

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

Erfahren Sie mehr über inline styles in React

Answer 3

Dies ist ein CSS-Attribut, so dass Sie Inline-Stile verwenden können:

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

Answer 4

Während die akzeptierte Antwort perfekt funktioniert, ich die classnames NPM package erwähnen möchte, wie eine alternative Art, es auf DRY-freundlichere Weise zu implementieren. Mit diesem Paket, brauchen Sie nicht auf die anderen, statische Klassen zwischen zwei Strings zu kopieren:

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