React控制元素顯示隱藏的方式

2021-10-24 14:09:17 字數 652 閱讀 2097

react控制元素顯示和隱藏的方法如下:

第一種是通過state變數來控制是否渲染元素,類似vue中的v-if。

第二種是通過style控制display屬性,類似vue 中的v-show。

第三種是通過動態切換classname。

方法一:

第一種方法是通過此例中showelem變數來控制是否載入元素的,如果showelem為false,內容是直接不會渲染的。

class demo extends react.component

}render() )

}}方法二:

這個方法很簡單,就是通過display屬性來控制元素顯示和隱藏。

class demo extends react.component

}render()

}方法三:

通過classname切換hide來實現元素的顯示和隱藏。

class demo extends react.component

}render()

顯示的元素

顯示的元素)}

}區別:

方法一不適合頻繁控制顯示隱藏的情況,因為他會重新渲染元素,比較耗費效能。在這種情況下,第二種或者第三種通過display來控制會更合理。

方法一適合安全性高的頁面,比如使用者資訊頁面

jQuery控制元素顯示 隱藏 切換 滑動的方法

jquery 隱藏和顯示 通過 hide 和 show 兩個函式,jquery 支援對 html 元素的隱藏和顯示 例項 hide click function show click function hide 和 show 都可以設定兩個可選引數 speed 和 callback。語法 selec...

React中通過狀態控制元素顯示隱藏的三種方法

react控制元素顯示和隱藏的方法目前我知道的有三種方法 第一種是通過state變數來控制是否渲染元素,類似vue中的v if。第二種是通過style控制display屬性,類似vue中的v show。第三種是通過動態切換classname。第一種方法是通過此例中showelem變數來控制是否載入元...

jquery控制元素的隱藏和顯示的幾種方法

使用jquery控制div的顯示與隱藏,一句話就能搞定,例如 顯示 id show 表示為display block,隱藏 id hide 表示為display none id toggle 切換元素的可見狀態。如果元素是可見的,切換為隱藏的 如果元素是隱藏的,則切換為可見的。顯示 id css d...