JSX

JSX 是一個前處理器步驟,它為 JavaScript 新增了 XML 語法。你絕對可以在沒有 JSX 的情況下使用 React,但 JSX 使 React 更加優雅。

就像 XML 一樣,JSX 標籤有標籤名稱,屬性和子標籤。如果屬性值包含在引號中,則該值為字串。否則,將值包裝在大括號中,值是隨附的 JavaScript 表示式。

從根本上說,JSX 只為 React.createElement(component, props, ...children) 函式提供語法糖。

那麼,以下 JSX 程式碼:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

編譯為以下 JavaScript 程式碼:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

總之,請注意 JSX的以下行既不是字串也不是 HTML

const element = <h1>Hello, world!</h1>;

它被稱為 JSX,它是 JavaScript語法擴充套件。JSX 可能會提醒你一種模板語言,但它具有 JavaScript 的全部功能。

React 團隊在他們的文件中說他們建議使用它來描述 UI 應該是什麼樣子。