什么是React.js处理visibility = hidden的方法？

Question

React不支持元素的visibility属性.

因此,如果我想在页面上显示或隐藏元素,但是在隐藏时仍占用空间,因此布局不会移动,我该如何做这样的事情？

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

Answer 1

您可以使用CSS.

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

在React中了解有关内联样式的更多信息

Answer 2

您可以使用CSS类并动态修改className.例如:

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

Answer 3

这是一个 css 属性，因此您可以使用内联样式：

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