React控制元素顯示隱藏的三種方法小結(jié)

更新時(shí)間：2022年12月02日 09:02:33 作者：叉叉醬

這篇文章主要介紹了React控制元素顯示隱藏的三種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

React控制元素顯示和隱藏的方法目前我知道的有三種方法：

第一種是通過state變量來控制是否渲染元素，類似vue中的v-if。
第二種是通過style控制display屬性，類似vue 中的v-show。
第三種是通過動(dòng)態(tài)切換className。

方法一

第一種方法是通過此例中showElem變量來控制是否加載元素的，如果showElem為false，內(nèi)容是直接不會(huì)渲染的。

class Demo extends React.Component{
? ? constructor(props){
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? showElem:true
? ? ? ? }
? ? }
? ? render(){
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? this.state.showElem?(
? ? ? ? ? ? ? ? ? ? ? ? <div>顯示的元素</div>
? ? ? ? ? ? ? ? ? ? ):null
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}

方法二

這個(gè)方法很簡(jiǎn)單，就是通過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來實(shí)現(xiàn)元素的顯示和隱藏。

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>
? ? ? ? )
? ? }
}

要注意的是，這幾種方法也有使用的區(qū)別：

方法一不適合頻繁控制顯示隱藏的情況，因?yàn)樗麜?huì)重新渲染元素，比較耗費(fèi)性能。在這種情況下，第二種或者第三種通過display來控制會(huì)更合理。

方法一適合安全性高的頁面，比如用戶信息頁面，根據(jù)不同的用戶級(jí)別顯示不一樣的內(nèi)容，這時(shí)候如果你用方法一或者方法二的話，用戶如果打開network還是可以看見，因?yàn)轫撁孢€是渲染了，只是隱藏了而已。而方法一是直接不渲染用戶信息的DOM元素，保證了安全性。

React切換顯示和隱藏

{radioChange >= 0 &&
? ? ? ? ? <div>
? ? ? ? ? ? {radioChange === 0 ? (
? ? ? ? ? ? ? <div className={style.template} key="1">
? ? ? ? ? ? ? ? <div className={style.inline}>如果金額超過</div>
? ? ? ? ? ? ? ? <Input className={style.input} label=" " id="free_price" rules={['required']}
? ? ? ? ? ? ? ? ? msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
? ? ? ? ? ? ? ? <div className={style.inline}>元，免運(yùn)費(fèi)，否則按照公里數(shù)收取，每公里</div>
? ? ? ? ? ? ? ? <Input className={style.input} label=" " id="unit_price" rules={['required']}
? ? ? ? ? ? ? ? ? msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
? ? ? ? ? ? ? ? <div className={style.inline}>元，最多不超過</div>
? ? ? ? ? ? ? ? <Input className={style.input} label=" " id="max_price" rules={['required']}
? ? ? ? ? ? ? ? ? msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
? ? ? ? ? ? ? ? <div className={style.inline}>元</div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? )
? ? ? ? ? ? ?: (
? ? ? ? ? ? ? ?<div className={style.template} key="2">
? ? ? ? ? ? ? ? ?<div className={style.inline}>如果金額超過</div>
? ? ? ? ? ? ? ? ?<Input className={style.input} label=" " id="free_price" rules={['required']}
? ? ? ? ? ? ? ? ? ?msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
? ? ? ? ? ? ? ? ?<div className={style.inline}>元，免運(yùn)費(fèi)，否則一口價(jià)</div>
? ? ? ? ? ? ? ? ?<Input className={style.input} label=" " id="price" rules={['required']}
? ? ? ? ? ? ? ? ? ?msg={this.msg} style={{ width: '100px', display: 'inlinbe-block' }} />
? ? ? ? ? ? ? ? ?<div className={style.inline}>元</div>
? ? ? ? ? ? ? ?</div>)

? ? ? ? ? ? }
? ? ? ? ? </div>

如上面代碼顯示，如果通過一個(gè)數(shù)值控制，顯示和隱藏切換的話，必須加入一個(gè)key值，否則在切換的時(shí)候活報(bào)錯(cuò)，應(yīng)該是在頁面渲染的時(shí)候會(huì)重復(fù)利用這個(gè)元素，如果加入keys，渲染的時(shí)候，不會(huì)產(chǎn)生復(fù)用