react实现点击隐藏显示的方法：1、使用style来显示隐藏，代码如“{{display:this.state.isshow?'block':'none'}}”；2、使用三元运算符实现隐藏显示，代码如“this.state.isshow?(...):(...)”；3、通过短路逻辑进行元素显示隐藏，代码如“this.state.isshow&&<div>...</div>”。
本教程操作环境：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?'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怎么实现点击隐藏显示的详细内容。