JSX

JavaScript的語法擴展之一

JSX是一種JavaScript的語法擴展，運用於React架構中，其格式比較像是模版語言，但事實上完全是在JavaScript內部實現的。元素是構成React應用的最小單位，JSX就是用來聲明React當中的元素，React使用JSX來描述用戶界面。

目錄

1指定屬性 2嵌套格式 3使用表達式

4防注入攻擊 5表示對象

指定屬性

JSX可以使用引號來定義以字元串為值的屬性：

const element =

;

也可以使用大括弧來定義以JavaScript表達式為值的屬性：

const element =

;

因為JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小駝峰）命名來定義屬性的名稱，而不是使用HTML的屬性名稱。例如：class變成了className，而tabindex則對應著tableIndex。

嵌套格式

JSX標籤是閉合式的，像XML/HTML一樣在結尾處用/>表示：

const element =

;

JSX標籤同樣可以相互嵌套：

const element = (

Hello!

Good to see you here.

);

使用表達式

在JSX中可任意使用JavaScript表達式，但要包含在大括弧里，例如：2 + 2，user.firstName，以及formatName(user)都是可以使用的。

function formatName(user) {

return user.firstName + ' ' + user.lastName;

}

const user = {

firstName: 'Harper',

lastName: 'Perez'

};

const element = (

Hello, {formatName(user)}!

);

ReactDOM.render(

element,

document.getElementById('root')

);

JSX，將它賦值給變數，當作參數傳入，作為返回值都是允許的：

function getGreeting(user) {

if (user) {

return

Hello, {formatName(user)}!

;

}

return

Hello, Stranger.

;

}

防注入攻擊

在JSX中嵌入用戶輸入是安全的：

const title = response.potentiallyMaliciousInput;

// 要接收到的可能含有危險內容的字元串放入大括弧中，這是比較安全的做法

const element =

{title}

;

React DOM在渲染之前默認會過濾所有傳入的值。它可以確保應用不會被注入攻擊。所有的內容在渲染之前都被轉換成了字元串。這樣可以有效地防止XSS（跨站腳本攻擊）。

表示對象

Babel轉譯器會把JSX轉換成一個名為React.createElement()的方法調用。

下面兩種代碼的作用是完全相同的：

const element = (

Hello, world!

);

const element = React.createElement(

'h1',

{ className: 'greeting' },

'Hello, world!'

);

React.createElement()這個方法首先會進行一些避免bug的檢查，之後會返回一個類似下面例子的對象：

// 注意: 以下示例是簡化過的（不代表在 React 源碼中是這樣）

const element = {

type: 'h1',

props: {

className: 'greeting',

children: 'Hello, world'

}

};

這樣的對象被稱為“React 元素”。它代表所有顯示在屏幕上的東西。React通過讀取這些對象來構建DOM並保持數據內容一致。

目錄