JSX的条件选择

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')
);

逻辑运算符 && ||

&&: 如果左边是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写法 请使用三目运算符代替

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

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