JSX 中的 If-Else

你沒法在JSX中使用 if-else 語句，因為 JSX 只是函數(shù)調(diào)用和對象創(chuàng)建的語法糖?？聪旅孢@個例子：

// This JSX:React.render(<div id="msg">Hello World!</div>, mountNode);// Is transformed to this JS:React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

// JSX 代碼:React.render(<div id="msg">Hello World!</div>, mountNode);// 編譯成 JS 是這樣的:React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

這意味著 if 語句不合適。看下面這個栗子

    // This JSX:
    <div id={if (condition) { 'msg' }}>Hello World!</div>    // Is transformed to this JS:
    React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

這是不合語法的 JS 代碼。不過你可以采用三元操作表達(dá)式：

React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

當(dāng)三元操作表達(dá)式不夠健壯，你也可以使用 if 語句來決定應(yīng)該渲染那個組件。

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (  <nav>
    <Home />
    {loginButton}  </nav>)

馬上開始使用JSX compiler吧。