React中的组件切换

最新推荐文章于 2024-07-17 14:42:11 发布

程序员徐小白

最新推荐文章于 2024-07-17 14:42:11 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react学习笔记文章标签： react js javascript

本文链接：https://blog.csdn.net/weixin_45865724/article/details/104361163

react学习笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在React中如何进行组件切换，主要通过在render函数内利用条件判断实现。代码示例展示了如何使用if-else语句来切换不同组件，强调了React组件的动态性和生命周期特点，当组件数据或方法改变时，页面会即时响应更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

直接上代码了

import React from 'react'
import ReactDOM from 'react-dom'
function UserLogin(){
    return <h1>登陆</h1>
}
function UserRegister(){
    return <h1>注册</h1>
}
class User extends React.Component{
    constructor(){
        super()
        this.state={
            flag:true
        }
    }
    render(){
        return (
            <div>
                <a href="#" onClick={()=>{ this.setState({flag:true})} }>登陆</a>
                <a href="#" onClick={()=>{this.setState({flag:false})} }>注册</a>
            {this.state.flag?<UserLogin></UserLogin>:<UserRegister></UserRegister>}
            </div>)
    }
}
ReactDOM.render(
    <User></User>
    ,document.getElementById('app')
)

可以直接粘贴去运行
在React中，组件的切换时通过在render函数中加入判断实现的，也可以用if-else进行切换，代码如下

render(){
        var element=null
        if(this.state.flag){
            element=<UserLogin></UserLogin>
        }else{
            element=<UserRegister></UserRegister>
        }
        return (
            <div>
                <a href="#" onClick={()=>{ this.setState({flag:true})} }>登陆</a>
                <a href="#" onClick={()=>{this.setState({flag:false})} }>注册</a>
                {element}
            </div>)
    }