react怎么实现点击隐藏显示

PHP中文网 • 2025年3月11日 18:36:20 • 编程技术 • 阅读 2

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中隐藏和显示元素的方法

第一种：用style来显示隐藏

class App extends React.Component {    state={        isShow:false,    }    check=()=>{        this.setState({            isShow:!this.state.isShow        })    }  render() {    return (              {/*第一种方式，用style来显示隐藏*/}                              
    )  }}ReactDOM.render(,document.getElementById('root'))

登录后复制

block表示显示，none表示隐藏

第二种：用三元运算符

class App extends React.Component {    state={        isShow:false,    }    check=()=>{        this.setState({            isShow:!this.state.isShow        })    }  render() {    return (              {/*第二种方法，用三元运算符*/}            {            this.state.isShow?(秦霄贤
):(张云龙
)            }              
    )  }}ReactDOM.render(,document.getElementById('root'))

登录后复制

第三种：通过短路逻辑进行元素显隐

class App extends React.Component {    state={        isShow:false,    }    check=()=>{        this.setState({            isShow:!this.state.isShow        })    }  render() {    return (              {/*第三种方式*/}          {            this.state.isShow && 秦霄贤
        }        {            !this.state.isShow && 张云龙
        }              
    )  }}ReactDOM.render(,document.getElementById('root'))

登录后复制

第四种：函数形式

class App extends React.Component {    state={        isShow:false,        love:'秦霄贤'    }    check=()=>{        this.setState({            isShow:!this.state.isShow        })    }    loves=(key)=>{        switch(key){            case '秦霄贤':                return 秦霄贤
            case '张云龙':                return 张云龙
        }       }  render() {    let ok=this.loves(this.state.love)    return (              {/*第四种函数形式*/}        {ok}              
    )  }}ReactDOM.render(,document.getElementById('root'))

登录后复制

推荐学习：《react视频教程》

以上就是react怎么实现点击隐藏显示的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2922202.html