React JSX 語(yǔ)法

三、JSX 語(yǔ)法

上一節(jié)的代碼， HTML 語(yǔ)言直接寫在 JavaScript 語(yǔ)言之中，不加任何引號(hào)，這就是 JSX 的語(yǔ)法，它允許 HTML 與 JavaScript 的混寫（查看 Demo02 ）。

var names = ['Alice', 'Emily', 'Kate'];

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

上面代碼體現(xiàn)了 JSX 的基本語(yǔ)法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析。上面代碼的運(yùn)行結(jié)果如下。

JSX 允許直接在模板插入 JavaScript 變量。如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開這個(gè)數(shù)組的所有成員（查看 demo03 ）。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
React.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代碼的arr變量是一個(gè)數(shù)組，結(jié)果 JSX 會(huì)把它的所有成員，添加到模板，運(yùn)行結(jié)果如下。