react學習(三)介紹JSX
阿新 • • 發佈:2017-07-10
http ng- render 嵌入 內容 code 命名 字符 nbsp
參考:https://facebook.github.io/react/docs/introducing-jsx.html
一、JSX介紹
ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));
紅色部分如果加一層‘‘號,會出錯,JSX既不是字符串也不是HTML,它是JavaScript的語法拓展
二、JSX使用
1.使用大括號嵌入js表達式
let a = "hello world";
ReactDOM.render(<div>{a}</div>, document.getElementById(‘root‘));
2.JSX編譯之後是js對象,也就是說,可以賦值給變量,作為參數,或者函數返回值等等
let a = ‘hello world‘;
let b = <div>{a}</div>
ReactDOM.render(b, document.getElementById(‘root‘));
3.使用JSX為屬性賦值
let a = ‘world‘; let b = <div className={a}>hello</div>//此處應該使用駝峰命名 ReactDOM.render(b, document.getElementById(‘root‘));
4.JSX可以預防XSS攻擊,因為在渲染之前,他會把內容轉換為字符串
三、JSX會被編譯成React.createElement()這種形式,來創建元素
react學習(三)介紹JSX