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如何实现点击隐藏显示”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

网页标题：react如何实现点击隐藏显示
URL链接：https://www.cdcxhl.com/article40/phdoho.html

成都网站建设公司_创新互联，为您提供网站维护、标签优化、定制网站、Google、做网站、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联