JSX

Download reactjs eBook

備註

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 <div>Hello {this.props.name}</div>;
  }
}

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

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

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

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

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

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

相關例子

Stats

63 Contributors: 2
Friday, March 3, 2017
許可下: CC-BY-SA

不隸屬於 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下載電子書