React.jsの可視性の処理方法は何ですか？

Question

リアクションはありませんsupport要素のvisibility属性。

ページ上の要素を表示したり非表示にしたりしてもレイアウトが変わらないように非表示にしてもスペースが必要な場合は、どうすればいいですか？

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

Answer 1

CSSクラスを使用してclassNameを動的に変更できます。たとえば：

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

Answer 2

あなたはこのためにCSSを使用することができます。言及私がしたい、

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

Answer 3

詳細については、こちらをご覧くださいそれをよりDRYに優しい方法で実装する別の方法です。そのパッケージを使用すると、2つの文字列の他、静的クラスをコピーする必要はありません：それが原因で、「可視性」のスペルミスの動作していないですし、第二は、糸くずのエラーです

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

Answer 4

受け入れ答えは完璧に動作しますがclassnames NPM packageを：

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

あなたはインラインスタイルを使用することができますので、これは、CSS属性ですinline styles in React