利用 JSX 編寫 DOM 結(jié)構(gòu)，可以用原生的 HTML 標(biāo)簽，也可以直接像普通標(biāo)簽一樣引用 React 組件。這兩者約定通過(guò)大小寫來(lái)區(qū)分，小寫的字符串是 HTML 標(biāo)簽，大寫開(kāi)頭的變量是 React 組件。

使用 HTML 標(biāo)簽：

import React from 'react';
import { render } from 'react-dom';

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

HTML 里的 class 在 JSX 里要寫成 className，因?yàn)?class 在 JS 里是保留關(guān)鍵字。同理某些屬性比如 for 要寫成 htmlFor。

使用組件：

import React from 'react';
import { render } from 'react-dom';
import MyComponent from './MyComponet';

var myElement = <MyComponent someProperty={true} />;
render(myElement, document.body);

使用 JavaScript 表達(dá)式

屬性值使用表達(dá)式，只要用 {} 替換 "":

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

子組件也可以作為表達(dá)式使用：

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

注釋

在 JSX 里使用注釋也很簡(jiǎn)單，就是沿用 JavaScript，唯一要注意的是在一個(gè)組件的子元素位置使用注釋要用 {} 包起來(lái)。

var content = (
  <Nav>
      {/* child comment, put {} around */}
      <Person
        /* multi
           line
           comment */
        name={window.isLoggedIn ? window.name : ''} // end of line comment
      />
  </Nav>
);

HTML 轉(zhuǎn)義

React 會(huì)將所有要顯示到 DOM 的字符串轉(zhuǎn)義，防止 XSS。所以如果 JSX 中含有轉(zhuǎn)義后的實(shí)體字符比如 © (?) 最后顯示到 DOM 中不會(huì)正確顯示，因?yàn)?React 自動(dòng)把 © 中的特殊字符轉(zhuǎn)義了。有幾種解決辦法：

直接使用 UTF-8 字符 ?
使用對(duì)應(yīng)字符的 Unicode 編碼，查詢編碼
直接插入原始的 HTML

<div dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}} />

自定義 HTML 屬性

如果在 JSX 中使用的屬性不存在于 HTML 的規(guī)范中，這個(gè)屬性會(huì)被忽略。如果要使用自定義屬性，可以用 data- 前綴。

可訪問(wèn)性屬性的前綴 aria- 也是支持的。

支持的標(biāo)簽和屬性

如果你要使用的某些標(biāo)簽或?qū)傩圆辉谶@些支持列表里面就可能被 React 忽略，必須要使用的話可以提 issue，或者用前面提到的 dangerouslySetInnerHTML。

上一篇：組件生命周期下一篇：服務(wù)器端渲染