处理可见性=隐藏的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方法是什么？

回答

相关问题