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中文網其他相關文章！
