深入 JSX

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

為什么要用 JSX？

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

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

XML 有固定的標(biāo)簽開啟和閉合的優(yōu)點(diǎn)。這能讓復(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é)點(diǎn)被轉(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é)點(diǎn)：

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

JavaScript 表達(dá)式

屬性表達(dá)式

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

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

子節(jié)點(diǎn)表達(dá)式

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

// 輸入 (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 表達(dá)式而已。你只需要在一個標(biāo)簽的子節(jié)點(diǎn)內(nèi)(非最外層)小心地用 {} 包圍要注釋的部分。

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

注意:

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