React中的组件切换

代码

直接上代码了

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>)
    }

总结：render函数中的组件，作为一个虚拟DOM对象挂载到页面上后，不会变成一个静态的页面代码，这个对象是有生命周期的，其中的数据或方法可以被改变和被调用，也会立即显示到页面上