一、条件表达式渲染 (适用于两个组件二选一的渲染)
render ( ) {
const isLoggedIn = this . state. isLoggedIn;
return (
< div>
{ isLoggedIn ? (
< LogoutButton onClick= { this . handleLogoutClick} / >
) : (
< LoginButton onClick= { this . handleLoginClick} / >
) }
< / div>
) ;
}
二、&& 操作符渲染 (适用于一个组件有无的渲染)
function Mailbox ( props) {
const unreadMessages = props. unreadMessages;
return (
< div>
< h1> Hello! < / h1>
{ unreadMessages. length > 0 &&
< h2>
You have { unreadMessages. length} unread messages.
< / h2>
}
< / div>
) ;
}
三、利用变量输出组件渲染 (适用于有多个组件多种条件下的渲染)
render ( ) {
const isLoggedIn = this . state. isLoggedIn;
const button = isLoggedIn ? (
< LogoutButton onClick= { this . handleLogoutClick} / >
) : (
< LoginButton onClick= { this . handleLoginClick} / >
) ;
return (
< div>
< Greeting isLoggedIn= { isLoggedIn} / >
{ button}
< / div>
) ;
}
四、利用函数方法输出组件或者利用函数式组件进行渲染 (适用于多个子组件需要根据复杂的条件输出的情况)
函数方式
renderButton ( ) {
const isLoggedIn = this . state. isLoggedIn;
if ( isLoggedIn)
{
return ( < LogoutButton onClick= { this . handleLogoutClick} / > ) ;
}
else
{
return ( < LoginButton onClick= { this . handleLoginClick} / > ) ;
}
}
render ( ) {
return (
< div>
< Greeting / >
{ this . renderButton ( ) }
< / div>
) ;
}
函数式组件
function Greeting ( props) {
const isLoggedIn = props. isLoggedIn;
if ( isLoggedIn) {
return < UserGreeting / > ;
}
return < GuestGreeting / > ;
}
ReactDOM. render (
< Greeting isLoggedIn= { false } / > ,
document. getElementById ( 'root' )
) ;