React.js 中一切皆組件，用 React.js 寫的其實就是 React.js 組件。愛掏網 - it200.com我們在編寫 React.js 組件的時候，一般都需要繼承 React.js 的 Component（還有別的編寫組件的方式我們后續會提到）。愛掏網 - it200.com一個組件類必須要實現一個 render 方法，這個 render 方法必須要返回一個 JSX 元素。愛掏網 - it200.com但這里要注意的是，必須要用一個外層的 JSX 元素把所有內容包裹起來。愛掏網 - it200.com返回并列多個 JSX 元素是不合法的，下面是錯誤的做法：
class FirstComponent extends React.Component {
render() {
return (
第一個
第二個
)
}
}
ReactDOM.render(必須要用一個外層元素把內容進行包裹：
class FirstComponent extends React.Component {
render() {
return (
第一個
第二個
)
}
}
ReactDOM.render(在 JSX 當中你可以插入 JavaScript 的表達式，表達式返回的結果會相應地渲染到頁面上。愛掏網 - it200.com表達式用 {} 包裹。愛掏網 - it200.com例如：
class FirstComponent extends React.Component {
render() {
const word = 'is good!'
return (
React 小書 { word }
)
}
}
ReactDOM.render(頁面上就顯示React 小書 is good。愛掏網 - it200.com你也可以把它改成 {1 + 2}，它就會顯示 React 小書 3。愛掏網 - it200.com你也可以把它寫成一個函數表達式返回：
...
render () {
return (
React 小書 {(function () { return 'is good'})()}
)
}
...
簡而言之，{} 內可以放任何 JavaScript 的代碼，包括變量、表達式計算、函數執行等等。愛掏網 - it200.com render 會把這些代碼返回的內容如實地渲染到頁面上，非常的靈活。愛掏網 - it200.com
表達式插入不僅僅可以用在標簽內部，也可以用在標簽的屬性上，例如：
...
render () {
const className = 'header'
return (
React 小書
)
}
...
React組件渲染出來的DOM結構：
這樣就可以為 div 標簽添加一個叫 header 的類名。愛掏網 - it200.com
注意，直接使用 還有一個特例就是 上面的代碼中定義了一個 如果你在表達式插入里面返回 這樣就相當于在 條件返回 JSX 的方式在 React.js 中很常見，組件的呈現方式隨著數據的變化而不一樣，你可以利用 JSX 這種靈活的方式隨時組合構建不同的頁面結構。愛掏網 - it200.com 如果這里有些同學覺得比較難理解的話，可以回想一下，其實 JSX 就是 JavaScript 里面的對象，轉換一下角度，把上面的內容翻譯成 JavaScript 對象的形式，上面的代碼就很好理解了。愛掏網 - it200.com 同樣的，如果你能理解 JSX 元素就是 JavaScript 對象。愛掏網 - it200.com那么你就可以聯想到，JSX 元素其實可以像 JavaScript 對象那樣自由地賦值給變量，或者作為函數參數傳遞、或者作為函數的返回值。愛掏網 - it200.com 這里給把兩個 JSX 元素賦值給了 再舉一個例子： 這里我們定義了一個 class 在 React.js 的元素上添加類名如 這種方式是不合法的。愛掏網 - it200.com因為 class 是 JavaScript 的關鍵字，所以 React.js 中定義了一種新的方式：className 來幫助我們給元素添加類名。愛掏網 - it200.com
for 屬性，例如 ，因為 for 也是 JavaScript 的關鍵字，所以在 JSX 用 htmlFor 替代，即 。愛掏網 - it200.com而其他的 HTML 屬性例如 style 、data-* 等就可以像普通的 HTML 屬性那樣直接添加上去。愛掏網 - it200.com{} 上面說了，JSX 可以放置任何表達式內容。愛掏網 - it200.com所以也可以放 JSX，實際上，我們可以在 render 函數內部根據不同條件返回不同的 JSX。愛掏網 - it200.com例如：class FirstComponent extends React.Component {
render() {
const isGoodWord = true
return (
React 小書 { isGoodWord ? is good : is not good}
)
}
}
ReactDOM.render(isGoodWord 變量為 true，下面有個用 {} 包含的表達式，根據 isGoodWord 的不同返回不同的 JSX 內容。愛掏網 - it200.com現在頁面上是顯示 React 小書 is good。愛掏網 - it200.com如果你把 isGoodWord 改成 false 然后再看頁面上就會顯示 React 小書 is not good。愛掏網 - it200.comnull ，那么 React.js 會什么都不顯示，相當于忽略了該表達式插入。愛掏網 - it200.com結合條件返回的話，我們就做到顯示或者隱藏某些元素：...
render () {
const isGoodWord = true
return (
React 小書
{isGoodWord
? is good
: null
}
)
}
...
isGoodWord 為 true 的時候顯示 is good，否則就隱藏。愛掏網 - it200.comclass FirstComponent extends React.Component {
render() {
const isGoodWord = true
const goodWord = is good
const badWord = is not good
return (
React 小書 { isGoodWord ? goodWord : badWord }
)
}
}
ReactDOM.render(goodWord 和 badWord 兩個變量，然后把它們作為表達式插入的條件返回值。愛掏網 - it200.com達到效果和上面的例子一樣，隨機返回不同的頁面效果呈現。愛掏網 - it200.comclass FirstComponent extends React.Component {
renderGoodWord (goodWord, badWord) {
const isGoodWord = true
return isGoodWord ? goodWord : badWord
}
render() {
return (
React 小書
{ this.renderGoodWord( is good, is not good)}
)
}
}
ReactDOM.render(renderGoodWord 函數，這個函數接受兩個 JSX 元素作為參數，并且隨機返回其中一個。愛掏網 - it200.com在 render 方法中，我們把上面例子的兩個 JSX 元素傳入 renderGoodWord 當中，通過表達式插入把該函數返回的 JSX 元素插入到頁面上。愛掏網 - it200.com
胡子大哈
React.js 資深用戶，熱愛分享、熱衷開源，哦，還有臺球，曾就職于百度。愛掏網 - it200.com著有《 React.js 小書》，以及前端在線評測系統ScriptOJ 。愛掏網 - it200.com
分享到：