React JSX語法

JSX只是一個語法糖，每一個XML標簽都會被JSX轉換工具轉換成純Javascript代碼，當然你想直接使用純Javascript代碼寫也是可以的，只是利用JSX，組件的結構和組件之間的關系看上去更加清晰。
例如：

var Nav = React.createClass({/*...*/}); var app = <Nav color=“blue"><Profile>click</Profile></Nav>;

會被轉化成

var Nav = React.createClass({/*...*/}); var app = React.createElement(Nav,{color:"blue"},React.createElement(Profile, null, "click") ); ReactElement createElement(string/ReactClass type,[object props],[children ...] )

這個方法的第一個參數可以是一個字符串，表示是一個HTML標準內的元素，或者是一個ReactClass類型的對象，表示我們之前封裝好的自定義組件。第二個參數是一個對象，或者說是字典也可以，它保存了這個元素的所有固有屬性（即傳入后基本不會改變的值）。從第三個參數開始，之后的參數都被認作是元素的子元素。

使用jsx和不適用jsx的區別

// 使用JSX React.render(<div><div><div>content</div></div></div>,document.getElementById('example') );// 不使用JSX React.render(React.createElement('div', null,React.createElement('div', null,React.createElement('div', null, 'content'))),document.getElementById('example') );

React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。要渲染 HTML 標簽，只需在 JSX 里使用小寫字母開頭的標簽名。
要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。

React 的 JSX 里約定分別使用首字母大、小寫來區分本地組件的類和 HTML 標簽。

注意:
由于 JSX 就是 JavaScript，一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。

JSX 把類 XML 的語法轉成純粹 JavaScript，XML 元素、屬性和子節點被轉換成 React.createElement 的參數。

注意:
JSX 表達式總是會當作 ReactElement 執行。具體的實際細節可能不同。一種優化 的模式是把 ReactElement 當作一個行內的對象字面量形式來繞過 React.createElement 里的校驗代碼。

屬性表達式

要使用 JavaScript表達式作為屬性值，只需把這個表達式用一對大括號 ({}) 包起來，不要用引號 (“”)。

// 輸入 (JSX): var person = <Person name={window.isLoggedIn ? window.name : ‘ ‘} />; // 輸出 (JS): var person = React.createElement(Person,{name: window.isLoggedIn ? window.name : ''} );

子節點表達式

同樣地，JavaScript 表達式可用于描述子結點。

// 輸入 (JSX): var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; // 輸出 (JS): var content = React.createElement(Container,null,window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login) );

注釋

JSX 里添加注釋很容易；它們只是 JS 表達式而已。你只需要在一個標簽的子節點內(非最外層)小心地用 {} 包圍要注釋的部分。

/var content = (<Nav>{/* 一般注釋, 用 {} 包圍 */}<Person/* 多行注釋 */name={window.isLoggedIn ? window.name : ''} // 行尾注釋/></Nav> );

轉載于:https://www.cnblogs.com/fengxuefei/p/6250598.html

總結

以上是生活随笔為你收集整理的22-React JSX语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。