ReactJSX

備註

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應該是什麼樣子。

相關例子

JSX中的孩子們