React控制元素顯示隱藏的三種方法
阿新 • • 發佈:2021-12-20
React
控制元素顯示和隱藏的方法目前我知道的有三種方法:
第一種是通過state
變數來控制是否渲染元素,類似vue
中的v-if
。
第二種是通過style
控制display
屬性,類似vue
中的v-show
。
第三種是通過動態切換className
。
方法一:
第一種方法是通過此例中showElem
變數來控制是否載入元素的,如果showElem
為false
,內容是直接不會渲染的。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
showElem:true
}
}
render(){
return (
<div>
{
this.state.showElem?(
<div>顯示的元素</div>
):null
}
</div>
)
}
}
方法二:
這個方法很簡單,就是通過display
屬性來控制元素顯示和隱藏。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
showElem:'none'
}
}
render(){
return (
<div style={{display:this.state.showElem}}>顯示的元素</div>
)
}
}
方法三:
通過className
切換hide
來實現元素的顯示和隱藏。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
showElem:true
}
}
render(){
return (
<div>
{/* 寫法一 */}
<div className={this.state.showElem?'word-style':'word-style hide'}>顯示的元素</div>
{/* 寫法二 */}
<div className={`${this.state.showElem?'':'hide'} word-style`}>顯示的元素</div>
</div>
)
}
}
要注意的是,這幾種方法也有使用的區別:
- 方法一不適合頻繁控制顯示隱藏的情況,因為他會重新渲染元素,比較耗費效能。在這種情況下,第二種或者第三種通過
display
來控制會更合理。 - 方法一適合安全性高的頁面,比如使用者資訊頁面,根據不同的使用者級別顯示不一樣的內容,這時候如果你用方法一或者方法二的話,使用者如果開啟
network
還是可以看見,因為頁面還是渲染了,只是隱藏了而已。而方法一是直接不渲染使用者資訊的DOM
元素,保證了安全性。
[React控制元素顯示隱藏的三種方法 - 簡書](https://www.jianshu.com/p/9eb803e523a2 )]