首頁  >  文章  >  web前端  >  react怎麼實現點擊隱藏顯示

react怎麼實現點擊隱藏顯示

藏色散人
藏色散人原創
2023-01-06 09:43:222394瀏覽

react實作點擊隱藏顯示的方法:1、使用style來顯示隱藏,程式碼如「{{display:this.state.isShow?'block':'none'}}」;2、使用三元運算子實作隱藏顯示,程式碼如「this.state.isShow?(...):(...)」;3、透過短路邏輯進行元素顯示隱藏,程式碼如「this.state.isShow&&

...
」。

react怎麼實現點擊隱藏顯示

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實現點擊隱藏顯示?

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?&#39;block&#39;:&#39;none&#39;}}>张云龙</button>
        <button style={{display:this.state.isShow?&#39;none&#39;:&#39;block&#39;}}>秦霄贤</button>
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

block表示顯示,none表示隱藏 

第二種:用三元運算子

<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>):(<div>张云龙</div>)
            }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

第三種:透過短路邏輯進行元素顯隱

<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>张云龙</div>
        }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

第四種:函數形式

<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 '张云龙':
                return <div>张云龙</div>
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {/*第四种函数形式*/}
        {ok}
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

推薦學習:《react影片教學

以上是react怎麼實現點擊隱藏顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn