什麼是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標籤,像是
例如:
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 ? <Nav /> : <Login />}</Container>; // Output (JS): var content = React.createElement( Container, null, window.isLoggedIn ? 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'