最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

React入门-5.条件渲染

XAMPP下载 admin 827浏览 0评论
 条件渲染
条件渲染非常简单,在render函数中返回不同的react element即可。在下面的例子中,我在state中维护了一个变量user。render函数对该变量进行判断,如果user有值,返回欢迎界面,否则返回登录页面。这是经典数据驱动的思想,数据决定页面的渲染。

// 用户登录成功后,将用户设置为全局变量
window.user = {name:”terry”}

class MyDiv extends React.Component{
constructor(props){
super(props);
this.state = {user : null}
}
// 用户点击登录按钮时候执行该函数,该函数中修改state中user的取值。并且阻止事件的默认行为
login=(event)=>{
this.setState({
user:window.user
})
event.preventDefault();
}
// 渲染,当state中维护的user为不存在的时候,显示”请登录”,否则显示”欢迎您,xxx”
render(){
if(this.state.user){
return (
<div>欢迎您,{this.state.user.name

} </div>
)
} else {
return (
<div>
<a href=”#” onClick={this.login}>请登录</a>
</div>
)
}
}
}

ReactDOM.render(<MyDiv/>,document.getElementById(‘app’));
另外,写这个案例的时候遇到一些坑

通过setState来修改state中的变量,不能直接修改。这个在之前已经提过了,这里再强调一些
setState函数式异步的,也就是说,如果在设置完成后我们直接打印this.state.user有可能出现的不是你想要的结果
在JSX中,我们不能直接绑定 this.state.user 。
在JSX中,如果绑定 this.state.user.name

的话也可能出现问题,上面提到了,setState是异步的,在没有为user赋值的时候user为null。如果此时访问user.name

,必然会报错。这里我们可以通过条件判断来进行渲染
条件渲染的另外一种做法就是使用三目运算符

转载请注明:XAMPP中文组官网 » React入门-5.条件渲染

您必须 登录 才能发表评论!