JavaScript的React框架中的JSX語法學習入門教學_基礎知識

什麼是JSX？

在用React寫組件的時候，通常會用到JSX語法，粗看上去，像是在Javascript代碼裡直接寫起了XML標籤，實質上這只是一個語法糖，每一個XML標籤都會被JSX轉換工具轉換成純Javascript程式碼，當然你想直接用純Javascript程式碼寫也是可以的，只是利用JSX，元件的結構和元件之間的關係看起來更清晰。

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

一個XML標籤，像是會被JSX轉換工具轉換成什麼呢？

例如：

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

會被轉換為：

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

那麼也就是說，我們寫一個XML標籤，實質上就是在呼叫React.createElement這個方法，並回傳一個ReactElement物件。

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

這個方法的第一個參數可以是一個字串，表示是一個HTML標準內的元素，或是一個ReactClass類型的對象，表示我們之前封裝好的自訂元件。第二個參數是一個對象，或者說字典也可以，它保存了這個元素的所有固有屬性（即傳入後基本上不會改變的值）。從第三個參數開始，之後的參數都被認定為元素的子元素。

JSX轉換器

要把帶有JSX語法的程式碼轉換為純Javascript程式碼，有多種方式，對於內聯與HTML中的程式碼或是未轉換過的外部文件，在script標籤中要加上type="text /jsx"，並引入JSXTransformer.js檔案即可，不過這種方式並不建議在生產環境使用，建議的方法是在程式碼上線前就將程式碼轉換好，可以使用npm全域安裝react-tools：

npm install -g react-tools

並使用命令列工具轉換即可（具體用法可以參考jsx -h）：

jsx src/ build/

如果使用自動化工具，例如gulp的話，可以使用對應外掛gulp-react。

HTML範本中使用JS

在HTML模板中使用JS非常方便，只需要用大括號把JS程式碼括起來即可。

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

編譯出來變成這樣：

var names = ['Alice', 'Emily', 'Kate']; 
React.render( 
 React.createElement("div", null, names.map(function (name) { 
 return React.createElement("div", null, "Hello, ", name, "!") 
 }) ), 
 document.getElementById('example') 
); 

要注意的是，大括號實際上就是一個變數輸出表達式，JSX最終就是直接把花括號中的內容作為React.createElement 的第三個參數直接傳入了（沒有任何修改直接傳入），所以其中只能放一行表達式，任何不能直接當作第三個參數的寫法都是錯的，那麼你這樣寫就是錯的：

React.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

因為很明顯其中花括號內的內容直接放在第三個參數上，所以語法不對。

這麼寫也是錯的：

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
); 

因為 React.createElement(“div”, null, var a = 1;) 是語法錯誤。
那你也可以理解為什麼大括號中的js表達​​式不能有分號結尾了吧。

要注意的是，如果你在屬性中輸出JS變量，是不能加引號的，不然會被當做字串而不被解析。
應該是這樣：

<a title={title}>链接</a>

使用HTML標籤

要建立一個HTML標準中存在的元素，直接像寫HTML程式碼一樣即可：

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

不過要注意的是class和for這兩個屬性，JSX語法最後是要轉換成純Javascript的，所以要跟在Javascript DOM一樣，用className和htmlFor。

還有一點是，在建立HTML標準內的元素時，JSX轉換器會丟棄那些非標準的屬性，如果一定要加入自訂屬性，那麼需要在這些自訂屬性之前加上data-前綴。

<div data-custom-attribute="foo" />

命名空間式組件

例如開發元件的時候，一個元件有多個子元件，你希望這些子元件可以作為其父元件的屬性，那麼可以像這樣用：

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

這樣你只要將子元件的ReactClass作為其父元件的屬性：

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

而創建子元素可以直接交給JSX轉換器：

var App = (
 React.createElement(Form, null,
  React.createElement(Form.Row, null,
   React.createElement(Form.Label, null),
   React.createElement(Form.Input, null)
  )
 )
);

此功能需要0.11以上版本

Javascript表達式

在JSX語法中寫Javascript表達式只需要用{}即可，例如下面這個使用三目運算子的範例：

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

不過要注意的是，JSX語法只是語法糖，它的背後是呼叫ReactElement的建構方法React.createElement的，所以類似這樣的寫法是不可以的：

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

可以從轉換後的Javascript程式碼看出明顯的語法錯誤，所以要不用三目運算符，要不要這樣寫：

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

传播属性（Spread Attributes）

在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

这样就相当于：

var component = <Component foo={x} bar={y} />

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'