react如何實現點擊隱藏顯示

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

react實現點擊隱藏顯示的方法：1、使用style來顯示隱藏，代碼如“{{display:this.state.isShow?'block':'none'}}”；2、使用三元運算符實現隱藏顯示，代碼如“this.state.isShow?(...):(...)”；3、通過短路邏輯進行元素顯示隱藏，代碼如“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'}}>張云龍</button>
        <button style={{display:this.state.isShow?'none':'block'}}>秦霄賢</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如何實現點擊隱藏顯示”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。