處理可見性=隱藏的React.js方法是什麼？

React不是support元素的可見性屬性。處理可見性=隱藏的React.js方法是什麼？

所以如果我想要顯示或隱藏頁面上的元素，但仍然佔用隱藏的空間，所以佈局不會移位，我該如何做這樣的事情？

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

來源

2015-11-12 Richard

您可以使用CSS類來動態修改您的className。例如：

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

來源

2015-11-12 09:11:17

您可以使用CSS這一點。

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

瞭解更多關於inline styles in React

來源

2015-11-12 09:15:39

它不工作，因爲「知名度」的拼寫錯誤和2是皮棉錯誤，你還要添加空間style = {{visibility：this.state.showButton？ 'visible'：'hidden'}} – Shiladitya

這是一個CSS屬性，所以你可以使用內嵌的樣式：

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

來源

2015-11-12 09:15:53

雖然接受的答案完美的作品，我想提classnames NPM package爲以更乾爽的方式實施它的另一種方式。有了這個包，你並不需要兩個字符串之間複製另一方面，靜態類：

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

來源

2017-08-06 12:07:00 gandreadis

處理可見性=隱藏的React.js方法是什麼？

回答

相關問題