使用React可以怎样控制元素的显示和隐藏
发布时间：2023-07-10 11:00:46 所属栏目：教程 来源：转载
导读： 给大家分享一下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')) （编辑：好传媒网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
