react如何實(shí)現(xiàn)點(diǎn)擊隱藏顯示

今天小編給大家分享一下react如何實(shí)現(xiàn)點(diǎn)擊隱藏顯示的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了全椒免費(fèi)建站歡迎大家使用！

react實(shí)現(xiàn)點(diǎn)擊隱藏顯示的方法：1、使用style來顯示隱藏，代碼如“{{display:this.state.isShow?'block':'none'}}”；2、使用三元運(yùn)算符實(shí)現(xiàn)隱藏顯示，代碼如“this.state.isShow?(...):(...)”；3、通過短路邏輯進(jìn)行元素顯示隱藏，代碼如“this.state.isShow&&<div>...</div>”。

react中元素的顯示和隱藏方式的使用

在react中，我們有常用的有四種方式來顯示元素的顯示和隱藏，和vue不同，vue中我們使用v-if或v-show來顯示元素的隱藏和顯示

下面分別介紹一下在react中隱藏和顯示元素的方法

第一種：用style來顯示隱藏

<script type="text/babel">
class App extends React.Component {
   state={
       isShow:false,
   }
   check=()=>{
       this.setState({
           isShow:!this.state.isShow
       })
   }
 render() {
   return (
     <div>
       {/*第一種方式，用style來顯示隱藏*/}
       <button style={{display:this.state.isShow?'block':'none'}}>張?jiān)讫?lt;/button>
       <button style={{display:this.state.isShow?'none':'block'}}>秦霄賢</button>
       <button onClick={this.check}>點(diǎn)擊切換</button>
     </div>
   )
 }
}
ReactDOM.render(<App/>,document.getElementById('root'))

block表示顯示，none表示隱藏

第二種：用三元運(yùn)算符

<script type="text/babel">
class App extends React.Component {
   state={
       isShow:false,
   }
   check=()=>{
       this.setState({
           isShow:!this.state.isShow
       })
   }
 render() {
   return (
     <div>

       {/*第二種方法，用三元運(yùn)算符*/}
           {
           this.state.isShow?(<div>秦霄賢</div>):(<div>張?jiān)讫?lt;/div>)
           }
       <button onClick={this.check}>點(diǎn)擊切換</button>
     </div>
   )
 }
}
ReactDOM.render(<App/>,document.getElementById('root'))

第三種：通過短路邏輯進(jìn)行元素顯隱

<script type="text/babel">
class App extends React.Component {
   state={
       isShow:false,
   }
   check=()=>{
       this.setState({
           isShow:!this.state.isShow
       })
   }
 render() {
   return (
     <div>
       {/*第三種方式*/}
         {
           this.state.isShow && <div>秦霄賢</div>
       }
       {
           !this.state.isShow && <div>張?jiān)讫?lt;/div>
       }
       <button onClick={this.check}>點(diǎn)擊切換</button>
     </div>
   )
 }
}
ReactDOM.render(<App/>,document.getElementById('root'))

第四種：函數(shù)形式

<script type="text/babel">
class App extends React.Component {
   state={
       isShow:false,
       love:'秦霄賢'
   }
   check=()=>{
       this.setState({
           isShow:!this.state.isShow
       })
   }

   loves=(key)=>{
       switch(key){
           case '秦霄賢':
               return <div>秦霄賢</div>
           case '張?jiān)讫?#39;:
               return <div>張?jiān)讫?lt;/div>
       }  
   }

 render() {
   let ok=this.loves(this.state.love)
   return (
     <div>
       {/*第四種函數(shù)形式*/}
       {ok}
       <button onClick={this.check}>點(diǎn)擊切換</button>
     </div>
   )
 }
}
ReactDOM.render(<App/>,document.getElementById('root'))

以上就是“react如何實(shí)現(xiàn)點(diǎn)擊隱藏顯示”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：react如何實(shí)現(xiàn)點(diǎn)擊隱藏顯示
URL鏈接：http://www.muchs.cn/article40/phdoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化、定制網(wǎng)站、Google、做網(wǎng)站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)