在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ JSX 中的 If-Else
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類型
組件的詳細(xì)說明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門
JSX 中的 If-Else
克隆組件
教程
更多的關(guān)于Refs
JSX 的 false 處理
高級(jí)性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡介
測試工具集
JSX 陷阱
工具集成（ToolingIntegration）
公開組件功能
通過 AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復(fù)用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具（Immutability Helpers）
動(dòng)態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽
復(fù)合組件
動(dòng)畫
插件
JSX 展開屬性
行內(nèi)樣式
性能分析工具
類名操作
與其他類庫并行使用 React
鍵控的片段
標(biāo)簽和屬性支持
組件間的通信
React （虛擬）DOM 術(shù)語
JSX 根節(jié)點(diǎn)的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標(biāo)簽
為什么使用 React?
getInitialState 里的 Props 是一個(gè)反模式
與 DOM 的差異

JSX 中的 If-Else

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

// 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 語句不合適。看下面這個(gè)栗子

    // 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)該渲染那個(gè)組件。

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

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

馬上開始使用JSX compiler吧。