if 條件句

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

邏輯運(yùn)算符 && ||

&&: 如果左邊是true，則取右邊的值，如果左邊是false，則取左邊的值
|| ：如果左邊是true，則左邊的值，如果左邊的值是false，則取右邊的值

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
        <div>
            <h1>Hello!</h1>
            {unreadMessages.length && <h2> You have {unreadMessages.length} unread messages.</h2>}
            {<h5>邏輯或-左</h5> || <h5>邏輯或-右</h5>}
        </div>
    );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
    <Mailbox unreadMessages={messages} />,
    document.getElementById('root')
);

image.png

JSX中沒有if-else寫法 請(qǐng)使用三目運(yùn)算符代替

render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
    );
}

如果不需要顯示試圖，直接render 中返回 null