React 不支持元素的可见性属性。
因此，如果我想在页面上显示或隐藏一个元素，但在隐藏时仍然占用空间以便布局不会移动，我该如何做这样的事情？
<i className="fa fa-trash" visibility={this.state.showButton ? "visible": "hidden"} />
React.js 处理可见性=隐藏的方式是什么？
IT技术
reactjs
2021-05-21 02:33:58
4个回答
您可以为此使用 CSS。
<i className="fa fa-trash" style={{visibility: this.state.showButton ? 'visible' : 'hidden' }} />
了解有关React 中内联样式的更多信息
您可以为此使用 CSS 类并动态修改您的 className。例如：
<i className={this.state.showButton ? "fa fa-trash" : "fa fa-trash hidden"} />
这是一个 css 属性，因此您可以使用内联样式：
...
var visibilityState = this.state.showButton ? "visible" : "hidden";
return (
<i className="fa fa-trash" style={{visibility: visibilityState}}/>
);
...
或者你可以在你的react组件中这样做
{
this.state.showButton && <i className="fa fa-trash" />
}
// Get a hook function
const {useState} = React;
const Example = ({title}) => {
const [visible, setVisible] = useState(false);
return (
<div>
<p>{title}</p>
<button onClick={() => setVisible(!visible)}>
visibility : {!visible ? "hidden" : "showing"}
</button>
{visible && <p>Its toggling visibility</p>}
</div>
);
};
// Render it
ReactDOM.render(
<Example title="Example using Hooks:" />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>