深入 JSX

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。React 可以用來做簡單的 JSX 句法轉(zhuǎn)換。

為什么要用 JSX？

你不需要為了 React 使用 JSX，可以直接使用原生 JS。但是，我們建議使用 JSX 是因為它能精確，也是常用的定義包含屬性的樹狀結(jié)構(gòu)的語法。

它對于非專職開發(fā)者比如設(shè)計師也比較熟悉。

XML 有固定的標(biāo)簽開啟和閉合的優(yōu)點。這能讓復(fù)雜的樹更易于閱讀，優(yōu)于方法調(diào)用和對象字面量的形式。

它沒有修改 JavaScript 語義。

HTML 標(biāo)簽對比 React 組件

React 可以渲染 HTML 標(biāo)簽 (strings) 或 React 組件 (classes)。

要渲染 HTML 標(biāo)簽，只需在 JSX 里使用小寫字母開頭的標(biāo)簽名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.getElementById('example'));

要渲染 React 組件，只需創(chuàng)建一個大寫字母開頭的本地變量。

var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;React.render(myElement, document.getElementById('example'));

React 的 JSX 里約定分別使用首字母大、小寫來區(qū)分本地組件的類和 HTML 標(biāo)簽。

注意:

由于 JSX 就是 JavaScript，一些標(biāo)識符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應(yīng)的屬性。

轉(zhuǎn)換（Transform）

JSX 把類 XML 的語法轉(zhuǎn)成原生 JavaScript，XML 元素、屬性和子節(jié)點被轉(zhuǎn)換成 React.createElement 的參數(shù)。

var Nav;// 輸入 (JSX):var app = <Nav color="blue" />;// 輸出 (JS):var app = React.createElement(Nav, {color:"blue"});

注意，要想使用 <Nav />，Nav 變量一定要在作用區(qū)間內(nèi)。

JSX 也支持使用 XML 語法定義子結(jié)點：

var Nav, Profile;// 輸入 (JSX):var app = <Nav color="blue"><Profile>click</Profile></Nav>;// 輸出 (JS):var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

使用 JSX 編譯器 來試用 JSX 并理解它是如何轉(zhuǎn)換到原生 JavaScript，還有 HTML 到 JSX 轉(zhuǎn)換器 來把現(xiàn)有 HTML 轉(zhuǎn)成 JSX。

如果你要使用 JSX，去 新手入門教程來教你如何搭建環(huán)境。

注意:

JSX 表達式總是會當(dāng)作 ReactElement 執(zhí)行。具體的實際細節(jié)可能不同。一種優(yōu)化 的模式是把 ReactElement 當(dāng)作一個行內(nèi)的對象字面量形式來繞過 React.createElement 里的校驗代碼。

JavaScript 表達式

屬性表達式

要使用 JavaScript 表達式作為屬性值，只需把這個表達式用一對大括號 ({}) 包起來，不要用引號 ("")。

// 輸入 (JSX):var person = <Person name={window.isLoggedIn ? window.name : ''} />;// 輸出 (JS):var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

子節(jié)點表達式

同樣地，JavaScript 表達式可用于描述子結(jié)點：

// 輸入 (JSX):var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;// 輸出 (JS):var content = React.createElement(
  Container,  null,  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注釋

JSX 里添加注釋很容易；它們只是 JS 表達式而已。你只需要在一個標(biāo)簽的子節(jié)點內(nèi)(非最外層)小心地用 {} 包圍要注釋的部分。

var content = (
  <Nav>
    {/* 一般注釋, 用 {} 包圍 */}
    <Person      /* 多
         行
         注釋 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注釋
    />
  </Nav>
);

注意:

JSX 類似于 HTML，但不完全一樣。參考 JSX 陷阱 了解主要不同。