react實作點擊隱藏顯示的方法:1、使用style來顯示隱藏,程式碼如「{{display:this.state.isShow?'block':'none'}}」;2、使用三元運算子實作隱藏顯示,程式碼如「this.state.isShow?(...):(...)」;3、透過短路邏輯進行元素顯示隱藏,程式碼如「this.state.isShow&&
...」。
本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。
react怎麼實現點擊隱藏顯示?
react中元素的顯示和隱藏方式的使用
#在react中,我們有常用的有四種方式來顯示元素的顯示和隱藏,和vue不同,vue中我們使用v-if或v-show來顯示元素的隱藏和顯示
下面分別介紹一下在react中隱藏和顯示元素的方法
<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影片教學》
以上是react怎麼實現點擊隱藏顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!