JSX中使用表達(dá)式
如果JSX中的代碼超過(guò)一行，我們一般用一個(gè)()進(jìn)行分組處理，遇到html一般都會(huì)單獨(dú)寫(xiě)在一個(gè)新行。
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
再比如：
// 用{}可以直接展示數(shù)據(jù)內(nèi)容個(gè)，類似es6模板字符串中的 ${}
function getGreeting(user) {
if (user) {
return <h1>Hello, {user}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX 屬性與{}
你可以使用引號(hào)來(lái)定義以字符串為值的屬性：
const element = <div tabIndex="0"></div>;
也可以使用大括號(hào)來(lái)定義以 JavaScript 表達(dá)式為值的屬性：
const element = <img src={user.avatarUrl} />;
JSX 防注入攻擊
你可以放心地在 JSX 當(dāng)中使用用戶輸入：
const title = <span>你好！</span>;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
React DOM 在渲染之前默認(rèn)會(huì) 過(guò)濾 所有傳入的值。它可以確保你的應(yīng)用不會(huì)被注入攻擊。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串。這樣可以有效地防止 XSS(跨站腳本) 攻擊。
數(shù)組的展示
變量是一個(gè)數(shù)組，則會(huì)展開(kāi)這個(gè)數(shù)組的所有成員。
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var arr = [
<h1>hi, aicoder.com</h1>,
<h2>React is awesome</h2>,
];
return (
<div className="App">
{arr}
</div>
);
}
}
export default App;
最終結(jié)果：
hi, aicoder.com
React is awesome
數(shù)組map輸出一個(gè)列表
App.js如下：
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var arr = ['aicoder.com', 'hamkd.com']
return (
<div className="App">
<h1>aicoder.com</h1>
<ul>
{
arr.map((item, index) =>
<li>{ index +1 } - { item }</li>
)
}
</ul>
</div>
);
}
}
export default App;
最終結(jié)果：
aicoder.com
1 - aicoder.com
2 - hamkd.com
JSX的最終歸宿
JSX 本質(zhì)會(huì)被編譯成JS，Babel 轉(zhuǎn)譯器會(huì)把 JSX 轉(zhuǎn)換成一個(gè)名為 React.createElement() 的方法調(diào)用。
下面兩種代碼的作用是完全相同的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 這個(gè)方法首先會(huì)進(jìn)行一些避免bug的檢查，之后會(huì)返回一個(gè)類似下面例子的對(duì)象：
// 注意: 以下示例是簡(jiǎn)化過(guò)的（不代表在 React 源碼中是這樣）
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
這樣的對(duì)象被稱為 “React 元素”。它代表所有你在屏幕上看到的東西。React 通過(guò)讀取這些對(duì)象來(lái)構(gòu)建 DOM 并保持?jǐn)?shù)據(jù)內(nèi)容一致。
