JSX的条件选择

if 条件句

function UserGreeting(props) {
    return 
Welcome back!
;
}
function GuestGreeting(props) {
    return 
Please sign up.
;
}
function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return ;
    }
    return ;
}
ReactDOM.render(
    // Try changing to isLoggedIn={true}:
    ,
    document.getElementById('root')
);

逻辑运算符 && ||

&&: 如果左边是true，则取右边的值，如果左边是false，则取左边的值
|| ：如果左边是true，则左边的值，如果左边的值是false，则取右边的值

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
        

            
Hello!
            {unreadMessages.length && 
 You have {unreadMessages.length} unread messages.
}
            {
逻辑或-左
 || 
逻辑或-右
}
        
    );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
    ,
    document.getElementById('root')
);

image.png

JSX中没有if-else写法 请使用三目运算符代替

render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
        

            The user is {isLoggedIn ? 'currently' : 'not'} logged in.
    
    );
}

如果不需要显示试图，直接render 中返回 null