> JSX是Javascript和XML結合的一種格式。該語法會自動將html標簽轉換為純JS再由瀏覽器執行
### 1.JSX 的基本語法規則:遇到 HTML 標簽(以 < 開頭),就用 HTML 規則解析;遇到代碼塊(以 { 開頭),就用 JavaScript 規則解析。egs:
~~~
import React, { Component } from 'react';
var names = ['柯南', '毛利蘭', '毛利小五郎', '怪盜基德']
class Study extends Component {
render() {
return <div>
{
names.map(function (name) {
return <p>Hello, {name}!</p>
})
}
</div>
}
}
export default Study
~~~
### 2.JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組,則會展開這個數組的所有成員。egs:
~~~
import React, { Component } from 'react';
var names = [
<p>Hello pi</p>,
<p>Hello xiao</p>,
<p>Hello tong</p>,
<p>Hello li</p>,
]
class Study extends Component {
render() {
return <div>{names}</div>
}
}
export default Study
~~~