組件的 render 方法

React.js 中一切皆組件，用 React.js 寫的其實就是 React.js 組件。咱們在編寫 React.js 組件的時候，通常都須要繼承 React.js 的 Component（還有別的編寫組件的方式咱們後續會提到）。一個組件類必需要實現一個 render 方法，這個 render 方法必需要返回一個 JSX 元素。但這裏要注意的是，必需要用一個外層的 JSX 元素把全部內容包裹起來。返回並列多個 JSX 元素是不合法的，下面是錯誤的作法：

...
render () {
  return (
    <div>第一個</div>
    <div>第二個</div>
  )
}
...

必需要用一個外層元素把內容進行包裹：

...
render () {
  return (
    <div>
      <div>第一個</div>
      <div>第二個</div>
    </div>
  )
}
...

表達式插入

在 JSX 當中你能夠插入 JavaScript 的表達式，表達式返回的結果會相應地渲染到頁面上。表達式用 {} 包裹。例如：

...
render () {
  const word = 'is good'
  return (
    <div>
      <h1>React 小書 {word}</h1>
    </div>
  )
}
...

頁面上就顯示「React 小書 is good」。你也能夠把它改爲 {1 + 2}，它就會顯示 「React 小書 3」。你也能夠把它寫成一個函數表達式返回：

...
render () {
  return (
    <div>
      <h1>React 小書 {(function () { return 'is good'})()}</h1>
    </div>
  )
}
...

簡而言之，{} 內能夠聽任何 JavaScript 的代碼，包括變量、表達式計算、函數執行等等。 render 會把這些代碼返回的內容如實地渲染到頁面上，很是的靈活。

表達式插入不單單能夠用在標籤內部，也能夠用在標籤的屬性上，例如：

...
render () {
  const className = 'header'
  return (
    <div className={className}>
      <h1>React 小書</h1>
    </div>
  )
}
...

這樣就能夠爲 div 標籤添加一個叫 header 的類名。

注意，直接使用 class 在 React.js 的元素上添加類名如 <div class=「xxx」> 這種方式是不合法的。由於 class 是 JavaScript 的關鍵字，因此 React.js 中定義了一種新的方式：className 來幫助咱們給元素添加類名。

還有一個特例就是 for 屬性，例如 <label for='male'>Male</label>，由於 for 也是 JavaScript 的關鍵字，因此在 JSX 用 htmlFor 替代，即 <label htmlFor='male'>Male</label>。而其餘的 HTML 屬性例如 style 、data-* 等就能夠像普通的 HTML 屬性那樣直接添加上去。

條件返回

{} 上面說了，JSX 能夠放置任何表達式內容。因此也能夠放 JSX，實際上，咱們能夠在 render 函數內部根據不一樣條件返回不一樣的 JSX。例如：

...
render () {
  const isGoodWord = true
  return (
    <div>
      <h1>
        React 小書
        {isGoodWord
          ? <strong> is good</strong>
          : <span> is not good</span>
        }
      </h1>
    </div>
  )
}
...

上面的代碼中定義了一個 isGoodWord 變量爲 true，下面有個用 {} 包含的表達式，根據 isGoodWord 的不一樣返回不一樣的 JSX 內容。如今頁面上是顯示 React 小書 is good。若是你把 isGoodWord 改爲 false 而後再看頁面上就會顯示 React 小書 is not good。

若是你在表達式插入裏面返回 null ，那麼 React.js 會什麼都不顯示，至關於忽略了該表達式插入。結合條件返回的話，咱們就作到顯示或者隱藏某些元素：

...
render () {
  const isGoodWord = true
  return (
    <div>
      <h1>
        React 小書
        {isGoodWord
          ? <strong> is good</strong>
          : null
        }
      </h1>
    </div>
  )
}
...

這樣就至關於在 isGoodWord 爲 true 的時候顯示 <strong>is good</strong>，不然就隱藏。

條件返回 JSX 的方式在 React.js 中很常見，組件的呈現方式隨着數據的變化而不同，你能夠利用 JSX 這種靈活的方式隨時組合構建不一樣的頁面結構。

若是這裏有些同窗以爲比較難理解的話，能夠回想一下，其實 JSX 就是 JavaScript 裏面的對象，轉換一下角度，把上面的內容翻譯成 JavaScript 對象的形式，上面的代碼就很好理解了。

JSX 元素變量

一樣的，若是你能理解 JSX 元素就是 JavaScript 對象。那麼你就能夠聯想到，JSX 元素其實能夠像 JavaScript 對象那樣自由地賦值給變量，或者做爲函數參數傳遞、或者做爲函數的返回值。

...
render () {
  const isGoodWord = true
  const goodWord = <strong> is good</strong>
  const badWord = <span> is not good</span>
  return (
    <div>
      <h1>
        React 小書
        {isGoodWord ? goodWord : badWord}
      </h1>
    </div>
  )
}
...

這裏給把兩個 JSX 元素賦值給了 goodWord 和 badWord 兩個變量，而後把它們做爲表達式插入的條件返回值。達到效果和上面的例子同樣，隨機返回不一樣的頁面效果呈現。

再舉一個例子：

...
renderGoodWord (goodWord, badWord) {
  const isGoodWord = true
  return isGoodWord ? goodWord : badWord
}

render () {
  return (
    <div>
      <h1>
        React 小書
        {this.renderGoodWord(
          <strong> is good</strong>,
          <span> is not good</span>
        )}
      </h1>
    </div>
  )
}
...

這裏咱們定義了一個 renderGoodWord 函數，這個函數接受兩個 JSX 元素做爲參數，而且隨機返回其中一個。在 render 方法中，咱們把上面例子的兩個 JSX 元素傳入 renderGoodWord 當中，經過表達式插入把該函數返回的 JSX 元素插入到頁面上。

下一節：組件的組合、嵌套和組件樹

上一節：使用 JSX 描述 UI 信息