React学习笔记之条件渲染(一)
前言
在React中,你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分,这取决于应用的state(状态)。下面就来看看详细的介绍:
条件渲染
可以根据state的值进行组件的条件渲染。例如:
functionGreeting(props){ constisLoggedIn=props.isLoggedIn; if(isLoggedIn){ return; } return ; } ReactDOM.render( //TrychangingtoisLoggedIn={true}: , document.getElementById('root') );
你还可以用变量去存储组件,以便进行条件筛选,使得渲染函数的返回值更加清爽,例如:
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=; }else{ button= ; } return( ); } } ReactDOM.render({button} , document.getElementById('root') );
还可以使用短操作符来实现条件筛选,可以用更短的代码写出渲染结果。例如&&来替代if,?:来替代ifelse,例如:
functionMailbox(props){ constunreadMessages=props.unreadMessages; return(); } constmessages=['React','Re:React','Re:Re:React']; ReactDOM.render(Hello!
{unreadMessages.length>0&&Youhave{unreadMessages.length}unreadmessages.
}, document.getElementById('root') );
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!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对毛票票的支持。