React学习笔记之条件渲染（一）
前言
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍：
条件渲染
可以根据state的值进行组件的条件渲染。例如：
functionGreeting(props){
constisLoggedIn=props.isLoggedIn;
if(isLoggedIn){
return
你还可以用变量去存储组件，以便进行条件筛选，使得渲染函数的返回值更加清爽，例如：
classLoginControlextendsReact.Component{
constructor(props){
super(props);
this.handleLoginClick=this.handleLoginClick.bind(this);
this.handleLogoutClick=this.handleLogoutClick.bind(this);
this.state={isLoggedIn:false};
}
handleLoginClick(){
this.setState({isLoggedIn:true});
}
handleLogoutClick(){
this.setState({isLoggedIn:false});
}
render(){
constisLoggedIn=this.state.isLoggedIn;
letbutton=null;
if(isLoggedIn){
button=
还可以使用短操作符来实现条件筛选，可以用更短的代码写出渲染结果。例如&&来替代if，?:来替代ifelse,例如：
functionMailbox(props){
constunreadMessages=props.unreadMessages;
return(
Hello!
{unreadMessages.length>0&&
Youhave{unreadMessages.length}unreadmessages.
}
);
}
constmessages=['React','Re:React','Re:Re:React'];
ReactDOM.render(
render(){
constisLoggedIn=this.state.isLoggedIn;
return(
Theuseris{isLoggedIn?'currently':'not'}loggedin.
);
}
这种跟更大的表达式的写法也可以，但是不推荐，因为代码就不是很直观了。
render(){
constisLoggedIn=this.state.isLoggedIn;
return(
{isLoggedIn?(
如果组件有时候需要渲染出来，而有时候不需要渲染出来，在不需要渲染的时候返回null即可。例如：
functionWarningBanner(props){
if(!props.warn){
returnnull;
}
return(
Warning!
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对毛票票的支持。